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

IT技术 javascript reactjs
2021-05-13 20:22:15

非常感谢这里的任何帮助。我有这段代码,它试图在表单字段收到更改时更新我的​​状态。这在以前版本的 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
        }
    }
}
3个回答

该错误是由

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

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

如果我理解正确,您会尝试将一个对象传播到一个数组中,因此它不起作用。您可以将数组散布在数组中,并将对象散布在对象中(类型必须匹配)。

希望它有帮助:)

错误来自这一行:...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 的回答解释了如何在没有突变的情况下做到这一点