How to update and object with key and store in an array and then finally save in state?-CodePudding

I am using reactjs and i'm facing problem in updating an object. I have map statement In which i'm changing partition key and returning that object. The problem is when i console value in map function that print right values But then when i console the final object. That contains same partition key and that is wrong. Partition key or id should be different as you can see my code below and the actual output and the desire output.

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
      }
    )

}

final object of daydetails comes:

[
   {
      "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)"
   }
]

where as the desire object containers unique or different partition key.

[
       {
          "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)"
       }
    ]

CodePudding user response：

This is occurring because you're using the same instance of partitionData to write the value of partition, so 2 is overwritten on 1 and 3 is overwritten on 2, and you get 3 in all the instances, you can fix this by making clone of partitionData and return that clone after updating.

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

As the partition is on the first level of this object, so the shallow cloning works here, but for nested objects, you should consider deep cloning.

CodePudding user response：

It's because your mapping the partitions so you will only have the last value, which is 3. What you could do to make sure you only use one ID is to use splice.

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;
      }
    });
  };