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

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

您的数据结构不容易理解，所以我无法比这个例子更好地帮助您： https: //repl.it/@Benoit_Vasseur/SO-Invalid-attempt-to-spread-non-iterable-instance

如果我理解正确的话，你会尝试将一个对象分散到一个数组中，所以它不起作用。您可以在数组中展开数组，在对象中展开对象（类型必须匹配）。

希望它有帮助:)