使用react将属性添加到属于某个状态的列表中

Question

我的状态有这个json变量：

this.state = {
        type:
        {
            name: '',
            type2: {
                atribute: '',
                parameter: [
                    {
                        value: '',
                        classtype: ''
                    }
                ],
                name: '',
                atribute1: '',
                atribute2: ''
            }
        }
    }

我想要做的是在我的参数列表中添加元素，这些元素在开始时是空的。

我做的是这样的：

addParams = () => {
    let newParam = {
        value: this.state.type.type2.parameter.value,
        classtype: this.state.type.type2.parameter.classtype
    };
    /** */
    this.setState(prevState => ({
        type: {
            // keep all the other key-value pairs of type
            ...prevState.type,
            type2: {
                ...prevState.type.type2,
                //this is supposed to add an element to a list
                parameter: [...prevState.type.type2.parameter, newParam]
            }
        }
    }))  }

但是在执行最后一行代码时出现以下错误：

未捕获的TypeError：在传播列表时无效传播非可迭代实例的尝试

我不知道为什么这不起作用，因为参数确实是一个列表。

Answer 1

如果this.state.type.type2.parameter是数组，那么为什么要在其上引用属性：let newParam = {     value: this.state.type.type2.parameter.value,     classtype: this.state.type.type2.parameter.classtype};我不认为你的状态是你所期望的结构，似乎你在代码中的某个点上用一个对象替换该数组。我建议使用react-devtools帮助您跟踪状态的变化。这不是一个答案，但我强烈建议使用immerjs来做这些纯嵌套更新。我几乎从不建议添加第三方库作为解决方案，但immer是轻量级的，改变生活。它导出一个名为produce的函数，并使用一个名为Proxy的概念来执行作为突变编写的纯更新。使用immer（并修复了您的错误），您的代码变为：const newParam = {     value: this.state.type.type2.parameter.value,     classtype: this.state.type.type2.parameter.classtype};this.setState(produce(draftState => {   draftState.type.type2.parameter.push(newParam);}))它允许您编写更易于阅读的简洁代码。是的，我知道这看起来像一个突变，但它不是一个100％纯。

Answer 2

试试这个 ： this.setState(prevState => {         return {             ...prevState,             type: {                 ...prevState.type,                 type2: {                     ...prevState.type.type2,                     parameter: [...prevState.type.type2.parameter, newParam]                 }             }         }     )