使用 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]

            }

        }

    }))  

}

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

未捕获的类型错误：传播列表时传播不可迭代实例的尝试无效

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

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 是轻量级的，并且可以改变生活。它导出一个名为 generate 的函数，并使用一个名为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]                }            }        }    )