reactJs更改数组中数组内对象的setState属性

Question

我在更改数组内对象的属性时再次遇到问题，但这次是数组中的数组。。。

我在更改图片预览时遇到问题。

这没有效果：

return {
...picture,
preview: "hallo"
}

完整代码为：

this.setState((prevState) => ({
stepsData: prevState.stepsData.map(step => {
if (step.identifier === stepIdentifier) {
console.log("lkkljk",step)
step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return {
...step,
[targetArray]: newArray,
}
}
return step
})
}), () => {
console.log(this.state.stepsData)
});

谢谢。

Answer 1

问题是step.onChangeContentComponents.map调用的返回值没有在任何地方使用。您必须将代码更改为

this.setState((prevState) => ({
stepsData: prevState.stepsData.map(step => {
if (step.identifier === stepIdentifier) {
console.log("lkkljk",step)
var newStep = step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return newStep
}
return step
})
}), () => {
console.log(this.state.stepsData)
});

然而，我会建议你不要在setState中进行复杂的计算，不要像那样在外面抽象计算

var stepsData = [...this.state.stepsData];
stepsData = stepsData.map(step => {
if (step.identifier === stepIdentifier) {
var newStep = step.onChangeContentComponents.map(
contentComponent => {
if (contentComponent.pictures !== null){
console.log(contentComponent.pictures);
console.log(contentComponent.pictures[0].preview);
contentComponent.pictures.map(picture => {
return {
...picture,
preview: "hallo"
}
});
}
return contentComponent
}
);
return newStep
}
return step
});
this.setState({stepsData}, () => {
console.log(this.state.stepsData)
});

Answer 2

尝试使用不变性助手util来解决它。

早些时候，这个util包含在react插件更新模块中。

Answer 3

解决方案可以是

let stepsData = [...this.state.stepsData];
stepsData = stepsData.map(step => {
if (step.identifier === stepIdentifier) {
return {
...step,
[targetArray]: newArray,
onChangeContentComponents: step.onChangeContentComponents.map(contentComponent => {
if (contentComponent.pictures !== null) {
return {
...contentComponent,
pictures: contentComponent.pictures.map(picture => {
console.log(picture)
return {
...picture,
preview: "hallo"
}
})
}
}
return contentComponent
}
)
}
}
return step
});
this.setState({stepsData: stepsData}, () => {
console.log(this.state.stepsData)
});