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

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

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

这没有效果：

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)
});

---

谢谢。

问题是

步骤.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)
});

---

问题是，

step.onChangeContentComponents.map

call的返回值没有在任何地方使用。您必须将代码更改为

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)
});

尝试使用util来解决它

早些时候，这个util包含在模块中。

尝试使用util来解决它

在此之前，该util已包含在模块中。

解决方案可能是

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)
    });

解决办法可能是

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)
    });

---

这不起作用，不，我调用该方法时出错。TypeError:无法读取ProcessStep.render（eval at./src/frontend/component/processs/processSteps/ProcessStep.js（bundle.js:12154），：116:61）中未定义的属性'length'（eval at./src/frontend/component/processs/processSteps/ProcessStep.js（bundle.js:12154），：116:61）从哪里获取

，

目标数组只是字符串的占位符。它以参数的形式出现。现在stepsdata始终是一个对象。问题只是

contentComponent.pictures.map（picture=>{return{…picture，preview:“hallo”}）无效。targetArray只是每个步骤的一个属性，不，我调用该方法时出错。TypeError:无法读取ProcessStep.render（eval at./src/frontend/component/processs/processSteps/ProcessStep.js（bundle.js:12154），：116:61）中未定义的属性'length'，

目标数组只是字符串的占位符。它以参数的形式出现。现在stepsdata始终是一个对象。问题只是

contentComponent.pictures.map（picture=>{return{…picture，preview:“hallo”}）无效。targetArray只是每个步骤的一个属性