如何在 React 中设置嵌套数组的状态（已编辑）答案

【问题标题】：How to set state of a nested array in React (Edited)如何在 React 中设置嵌套数组的状态（已编辑）
【发布时间】：2019-04-04 00:59:27
【问题描述】：

我有这组数据

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

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

我假设我做了类似的事情。

编辑：另外，比如说我想更新每个星期的权重数组，我该怎么做？

【问题讨论】：

您是要在状态下创建一个名为“weights”的新条目还是创建一个名为“weights”的变量？
@CodySwann 我想我会创建一个新的数组变量并使用这个新的数组变量来更新状态“权重”
@Bpicks - 看看 react 的不变性助手——特别是更新方法。您可以创建一个新的状态对象，然后使用 setState 用更新后的状态更新您的整个状态。 reactjs.org/docs/update.html
@heyitsjhu 打败了我。这是最好的方法。否则，您必须使用扩展运算符进行一些讨厌的对象扩展
@CodySwann `@heyitsjhu 好吧，比如说我想更新两个星期的权重数组。我是否可以每周映射并使用不变性助手的更新方法更新状态？

标签： javascript arrays reactjs

【解决方案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。问题是 Spread 在复制数组（或对象）时只深一层，所以我们需要在这里多做一步：

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

【讨论】：

这不是克隆嵌套对象的方法。 weight 属性仍然是一个参考。还修改了newWeeks[0].weight 原因更改为this.state.weeks[0].weight。
嗨，您可以看到我使用 Spread syntax 从旧数组创建了新数组，它创建了具有值的新数组，而不是引用，请在此处阅读更多信息 > developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
只需将 console.log(this.state.weeks); 放在代码沙箱中的第 21 行，就在 newWeeks[0].weights = [1, 2, 3]; 行之后。当setState 操作尚未运行时，您将看到weeks[0].weights 也已修改。

【解决方案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 属性不会被克隆，只是以正常方式复制引用。

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

【讨论】：