Javascript 传播不可复制实例的尝试无效

非常感谢您的帮助。我有一段代码，它试图在表单字段收到更改时更新我的状态。这在以前版本的React中运行良好，但升级到最新版本后，我收到错误“传播不可编辑实例的尝试无效”

我明白我需要使我的状态正常化，我计划这样做。然而，这将涉及一个重要的重构，我希望通过一个快速修复来避免这个重构

错误

代码

handleMaterialTypeChange = (event, data) => {
    const material = this.state.controls.materials.materials;
    material[data.searchInput].material_type = data.value;

    this.setState(prevState => ({
        controls: {
            ...prevState.controls,
            materials: {
                ...prevState.controls.materials,
                materials: [
                    ...prevState.controls.materials.materials[data.searchInput],
                    ...material
                ]
            }
        }
    }));
};

说明示例：

state = {
    controls: {
        materials: {
            value: "",
            materials: [
                {
                    material_type: "",
                    material: ""
                }
            ],
            validation: {
                required: true,
                minLength: 10
            },
            valid: false,
            touched: false
        }
    }
}

---

您的数据结构不容易理解，因此我只能通过以下示例帮助您：

如果我理解正确，您可以尝试将对象分散到数组中，使其无法工作。可以在数组中展开数组，在对象中展开对象（类型必须匹配）

---

希望有帮助：）

错误来自这一行：

…prevState.controls.materials.materials[data.searchInput]

，因为它是一个对象。由于您已经在更新顶部的

材质

数组，因此无需添加其他项

您应该更改此部分：

materials:[…material]

下面是一些模仿

setState

handleMaterialTypeChange=（事件、数据）=>{
const material=state.controls.materials.materials；
物料[data.searchInput]。物料类型=data.value；
设置状态（prevState=>({
控制：{
…国家控制，
材料：{
…prevState.controls.materials，
材料：[
…材料//在这里
]
}
}
}));
};
常量设置状态=（fn）=>{
控制台日志（fn（状态））
}
const state={controls:{materials:{value:，materials:[{material_type:，material:}]，验证：{required:true，minLength:10}，valid:false，toucted:false}
handleMaterialTypeChange（null，{searchInput:0，值：“newMaterial”}）

错误是由

[...prevState.controls.materials.materials[data.searchInput],

因为不能在数组文本中传播不可iterable对象

如果您真的想保持“不可变”模式，则不应执行以下操作：

const material = this.state.controls.materials.materials;
material[data.searchInput].material_type = data.value;

在没有上述状态突变的情况下，可以按如下方式制作修改后的副本：

setState(prevState => ({
    controls: {
        ...prevState.controls,
        materials: {
            ...prevState.controls.materials,
            materials: Object.assign([], {
                ...prevState.controls.materials.materials,
                [data.searchInput]: {
                    ...state.controls.materials.materials[data.searchInput],
                    material_type: data.value
                }
            })
        }
    }
}))

---

你能给我们看看你们州的结构吗？（以及此函数更改的变量）错误意味着您得到了

…something

和

something

不是数组或类似于数组的东西。让我用状态结构更新帖子。不是100%确定，但看起来应该是

prevState.controls.materials.materials[data.searchInput]，

没有

。

可能应该是

materials:[…material]

没有

…prevState.controls.materials.materials[data.searchInput]

因为您正在顶部更新它