React Native 我正在尝试用一个新键更新一个对象并将其存储在数组中,我如何才能做到这一点并将结果数组保存在状态中？

xqkwcwgp 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(162)

我在ReactJS应用程序中更新对象时遇到问题。我正在使用map语句更改对象的分区键，但最终对象仍包含原始分区键。预期行为是更新分区键。我在下面包含了我的代码，以及实际的和期望的输出。你能帮助我理解为什么分区键没有被更新，以及我如何解决这个问题吗？

this.state = {
      keyb: 0,
      clockVisiblity:false,
      partitions:[
        {id:1,name:"P1"},
        {id:2,name:"P2"},
        {id:3,name:"P3"},
      ],
      dayDetails:[
       {
      "day":"Monday",
      "full_day":false,
      "partition":1,
      "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
      },
      ],
      activePartition:1,

}


setPartitionsDetails=()=>{

    var partitionData = this.state.dayDetails.find((item)=>item.partition===this.state.activePartition)
    const dayDetails = this.state.partitions.map((partition) => {
      partitionData.partition=partition.id
      console.log("You object ",partitionData)
      return partitionData
      }
    )

}

daydetails的最终目标是：

[
   {
      "day":"Monday",
      "full_day":false,
      "partition":3,
      "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
   },
   {
      "day":"Monday",
      "full_day":false,
      "partition":3,
      "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
   },
   {
      "day":"Monday",
      "full_day":false,
      "partition":3,
      "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
   }
]

其中所需对象包含唯一的或不同的分区密钥。

[
       {
          "day":"Monday",
          "full_day":false,
          "partition":1,
          "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
       },
       {
          "day":"Monday",
          "full_day":false,
          "partition":2,
          "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
       },
       {
          "day":"Monday",
          "full_day":false,
          "partition":3,
          "start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
       }
    ]

react-native

来源：https://stackoverflow.com/questions/73567639/i-am-trying-to-update-an-object-with-a-new-key-and-store-it-in-an-array-how-can

2条答案

按热度按时间

dnph8jn41#

发生这种情况是因为您使用partitionData的同一个示例写入分区的值，因此2被覆盖在1上，3被覆盖在2上，并且您在所有示例中得到3，您可以通过克隆partitionData并在更新后返回该克隆来修复此问题。

const dayDetails = this.state.partitions.map((partition) => {
  let partitionDataClone = {...partitionData};
  partitionDataClone.partition = partition.id
  return partitionDataClone;
})

由于partition位于该对象的第一级，因此浅克隆在这里有效，但是对于嵌套对象，应该考虑深克隆。

赞(0）回复(0）举报 2023-01-02

z4bn682m2#

这是因为您Map了分区，所以您将只拥有最后一个值，即3。您可以确保只使用一个ID的方法是使用拼接。

const setPartitionsDetails = () => {
    const partitionCollection = [...this.state.partitions];

    this.state.dayDetails.forEach((_, index) => {
      var partitionData = this.state.dayDetails[index];

      if (partitionCollection.length) {
        partitionData.partition = partitionCollection.splice(0, 1)[0].id;
      }
    });
  };

赞(0）回复(0）举报 2023-01-02

我来回答

React Native 我正在尝试用一个新键更新一个对象并将其存储在数组中,我如何才能做到这一点并将结果数组保存在状态中？

2条答案

相关问题

热门标签

最新问答