传播不可迭代实例的尝试无效

Question

非常感谢这里的任何帮助。 我有这段代码，只要表单字段收到更改，它就会尝试更新我的状态。 这在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
        }
    }
}

Answer 1

错误是由

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

因为您无法在数组文字中传播不可迭代的对象。

如果你真的想要保持“不可变”模式，你不应该这样做：

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

Answer 2

你的数据结构不容易理解，所以我对这个例子不能帮助你： https ： //repl.it/@Benoit_Vasseur/SO-Invalid-attempt-to-spread-non-iterable-instance

如果我理解正确，你会尝试将一个对象传播到一个数组中，因此它不起作用。 您可以在数组中传播数组，在对象中传播对象（类型必须匹配）。

希望它有帮助:)

Answer 3

错误来自这一行： ...prevState.controls.materials.materials[data.searchInput]因为它是一个对象。 由于您已经在顶部更新materials数组，因此无需添加其他项目。

您应该更改此部分： materials: [ ...material ]

这是一些模仿setState代码

 handleMaterialTypeChange = (event, data) => { const material = state.controls.materials.materials; material[data.searchInput].material_type = data.value; setState(prevState => ({ controls: { ...prevState.controls, materials: { ...prevState.controls.materials, materials: [ ...material // here ] } } })); }; const setState = (fn) => { console.log(fn(state)) } const state = {controls:{materials:{value:"",materials:[{material_type:"",material:""}],validation:{required:true,minLength:10},valid:false,touched:false}}} handleMaterialTypeChange(null, {searchInput: 0,value: "newMaterial"}) 

更新：这只是修复了错误，但@ trincot的答案解释了如何在没有变异的情况下做到这一点