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

将不胜感激这里的任何帮助。我有这段代码，每当表单字段收到更改时都会尝试更新我的状态。这在以前版本的 React 中工作得很好，但升级到最新版本后，我收到错误“传播不可迭代实例的尝试无效”。

我知道我需要使我的国家正常化，我计划这样做。然而，这将涉及重大的重构，我希望目前可以通过快速修复来避免。

Error

Code

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],

因为你不能在数组文字中传播不可迭代的对象。

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

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

如果没有上述情况mutation国家的，改变的copy可以这样制作：

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