Question

我有这组数据

this.state = { weeks: [ { weekNumber: 1, weights: [] }, { weekNumber: 2, weights: [] } ] }

我想做的是创建一个新数组并将其设置为“ weights”。我检查了其他类似这样的帖子： Set state of nested array

我想我做了类似的事情。

编辑：另外，比如说我想更新每个星期的权重数组，我将如何去做呢？

Answer 1

我通常使用此解决方案：

const newWeeks = [ ...this.state.weeks ];
newWeeks[0] = { ...newWeeks[0] };
//modify `newWeeks`

this.setState({
  weeks: newWeeks
});

更新1： 实时版本：https://codesandbox.io/s/20v7r2zx0j?fontsize=14&module=%2Fsrc%2FTest.js

更新2：谢谢@bird。问题是扩展在复制数组（或对象）时只会深入一层，因此我们需要在此处执行额外的步骤：

newWeeks[0] = { ...newWeeks[0] };

Answer 2

因为它是一个嵌套对象，所以您可以使用JSON.parse(JSON.stringify(obj))

用本机javascript代码进行克隆

this.state = {
    weeks: [
        {
            weekNumber: 1,
            weights: []
        },
        {
            weekNumber: 2,
            weights: []
        }
    ]
}

const newWeeks = JSON.parse(JSON.stringify(this.state.weeks))

newWeeks[0].weights = [1,2,3]

this.setState({weeks: newWeeks})

另一个普通的克隆，例如：[...this.state.weeks]或Object.assign([], this.state.weeks)仅克隆级别1的属性，而不是嵌套的，在您的情况下，weight属性将不会被克隆，只需复制引用以正常方式。

您可以查看lodash库中的cloneDeep或使用immer来归档目标。

如何在React中设置嵌套数组的状态

2 个答案: