reactjs中对象状态数组中对象的不可变更改数组答案

【问题标题】：Immutable change array of object inside array of objects state in reactjsreactjs中对象状态数组中对象的不可变更改数组
【发布时间】：2021-05-09 06:57:39
【问题描述】：

我在对象（wid）数组中有一个对象（卡片）数组，它在对象（数据）内部，如下所示：

{
  data: {
    ban: {
      first: "one"
    },
    foo: {
      second: "two"
    },
    wid: [
      {
        code: "three",
        name: "four",
        position: 1,
        cards: [
          {
            title: "five",
            id: "six"
          }
        ]
      },
      {
        code: "seven",
        name: "eight",
        position: 2,
        cards: [
          {
            title: "nine",
            id: "ten"
          }
        ]
      },
      //...
      {
        code: "alpha",
        name: "beta",
        position: 12,
        cards: [
          {
            title: "gamma",
            id: "theta"
          }
        ]
      }
    ]
  }
}

现在我从 API 获得另一个值，如下所示

const newWid = {
  code: "new",
  name: "newname",
  position: 2,
  cards: [
    {
      title: "newtile",
      id: "newid"
    }
  ]
}

如何更改 data ：只有 cards 在数组 wid 内的对象内被替换在新 wid 中提供的位置，而不是 wid 内的整个对象）不可变，与提供的位置。（2 提供于newWid）

附言。我没有使用 setState。

【问题讨论】：

"Ps. 我没有使用 setState" 你在使用什么？
只是不可变地更新状态
如何你“只是”不可变地更新状态？（请注意，setState 就是这样做的。）
让我们忘记状态，我们如何不可变地更新上面的对象

标签： javascript arrays reactjs redux immutability

【解决方案1】：

const position = newWid.display //获取位置

//step1 : 获取wid里面的对象并更新它的卡片 const specificWid = { ...data.wid[position], cards : data.cards }

//step2 : 更新 wid const newestWid = [...data.wid] newwid.splice( position , 1 , specificWidget)

//步骤3： {...data, data : {...data, wid : [...newwid] } }

【讨论】：