reactjs 中的对象数组 state 中 object 的不可变更改数组

Question

我在对象（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"
    }
  ]
}

How can I change data : only cards inside object inside array wid to be replaced at position provided in new wid and not the whole object inside wid ) immutable, with the position provided. （ newWid中提供的2个）

附言。 我没有使用 setState。

Answer 1

const position = newWid.display //得到 position

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

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

//step3: {...data, data: {...data, wid: [...newwid] } }