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

我的状态中有一个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:传播不可iterable实例的尝试无效 在分发列表时

---

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

如果

this.state.type.type2.parameter

是一个数组，那么为什么要引用它的属性：

let newParam = {
    value: this.state.type.type2.parameter.value,
    classtype: this.state.type.type2.parameter.classtype
};

我不认为您的状态是按您期望的方式构造的，似乎您在代码中的某个点用对象替换该数组。我建议帮助您跟踪您的状态变化

这并不是一个确切的答案，但我强烈建议使用来完成这些纯嵌套更新。我几乎从不建议添加第三方库作为解决方案，但immer是轻量级的，改变了生活。它导出一个名为product的函数，并使用一个名为a的概念来执行编写为突变的纯更新

使用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%纯的。

如果

这个.state.type.type2.parameter

是一个数组，那么为什么要引用它的属性：

let newParam = {
    value: this.state.type.type2.parameter.value,
    classtype: this.state.type.type2.parameter.classtype
};

我不认为您的状态是按您期望的方式构造的，似乎您在代码中的某个点用对象替换该数组。我建议帮助您跟踪您的状态变化

这并不是一个确切的答案，但我强烈建议使用来完成这些纯嵌套更新。我几乎从不建议添加第三方库作为解决方案，但immer是轻量级的，改变了生活。它导出一个名为product的函数，并使用一个名为a的概念来执行编写为突变的纯更新

使用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%纯。

试试这个：

 this.setState(prevState => {
        return {
            ...prevState,
            type: {
                ...prevState.type,
                type2: {
                    ...prevState.type.type2,
                    parameter: [...prevState.type.type2.parameter, newParam]
                }
            }
        }

    )

试试这个：

 this.setState(prevState => {
        return {
            ...prevState,
            type: {
                ...prevState.type,
                type2: {
                    ...prevState.type.type2,
                    parameter: [...prevState.type.type2.parameter, newParam]
                }
            }
        }

    )