Home > Enterprise >  setState of multiple objects - React JS
setState of multiple objects - React JS

Time:05-03

I'm having problems when I want to update the state of an array and I am using the push() method to add the new values ​​but apparently push does not update, so I have doubts if I can make a setState of multiple values.

Here's the code with the push() method:

buildDetailDB = () => {
    let {detail} = this.state;
    //console.log(detail)
    let dms=[];
    detail.dms.map(fabric => {
      dms.push({
        "line_id": fabric.line_id,
        "id": fabric.id,
        "dm": fabric.dm,
        "priceWhite": fabric.priceWhite,
        "priceMedium": fabric.priceMedium,
        "priceDark": fabric.priceDark,
        "priceSpecial": fabric.priceSpecial,
        "priceWhiteC": 0,
        "priceMediumC": 0,
        "priceDarkC": 0,
        "priceSpecialC": 0,
        "Blong": this.FixElementValue(fabric.Blong),
        "Bwidth": this.FixElementValue(fabric.Bwidth),
        "fabricType": fabric.fabricType,
        "weightBWashOriginal": this.FixElementValue(fabric.weightBWashOriginal),
        "weightBWashCalculated": this.FixElementValue(fabric.weightBWashCalculated),
        "dm_width": this.FixElementValue(fabric.dm_width),
        "markerWidth": this.FixElementValue(fabric.markerWidth),
        "dm_pt": fabric.dm_pt,
        "yieldydslbs": this.FixElementValue(fabric.yieldydslbs),
        "markerEfficiency": this.FixElementValue(fabric.markerEfficiency),
        "markerLong": this.FixElementValue(fabric.markerLong),
        "pieceByMarker": this.FixElementValue(fabric.pieceByMarker),
        "lbsunit": this.FixElementValue(fabric.lbsunit),
        "lbsunitwaste": this.FixElementValue(fabric.lbsunitwaste),
        "sqinchunit": this.FixElementValue(fabric.sqinchunit),
        "ydsunit": fabric.ydsunit,
        "bydspunit": this.FixElementValue(fabric.bydspunit),
        "blbspunit": this.FixElementValue(fabric.blbspunit),
      })
      console.log(fabric)
      return fabric;
    });

CodePudding user response:

I'm not entirely sure what the rest of your detail state looks like but I'm assuming it's an array of objects. Instead of destructuring your detail from state and performing updates that way, you can utilize the prevState callback that setState() offers.

The following below should pretty much get you there.

buildDetailDB = () => {
  this.setState({
    detail: [
      ...prevState.detail,
      {
        dms: prevState.detail.dms.map((fabric) => ({
          line_id: fabric.line_id,
          id: fabric.id,
          dm: fabric.dm,
          priceWhite: fabric.priceWhite,
          priceMedium: fabric.priceMedium,
          priceDark: fabric.priceDark,
          priceSpecial: fabric.priceSpecial,
          priceWhiteC: 0,
          priceMediumC: 0,
          priceDarkC: 0,
          priceSpecialC: 0,
          Blong: this.FixElementValue(fabric.Blong),
          Bwidth: this.FixElementValue(fabric.Bwidth),
          fabricType: fabric.fabricType,
          weightBWashOriginal: this.FixElementValue(fabric.weightBWashOriginal),
          weightBWashCalculated: this.FixElementValue(
            fabric.weightBWashCalculated
          ),
          dm_width: this.FixElementValue(fabric.dm_width),
          markerWidth: this.FixElementValue(fabric.markerWidth),
          dm_pt: fabric.dm_pt,
          yieldydslbs: this.FixElementValue(fabric.yieldydslbs),
          markerEfficiency: this.FixElementValue(fabric.markerEfficiency),
          markerLong: this.FixElementValue(fabric.markerLong),
          pieceByMarker: this.FixElementValue(fabric.pieceByMarker),
          lbsunit: this.FixElementValue(fabric.lbsunit),
          lbsunitwaste: this.FixElementValue(fabric.lbsunitwaste),
          sqinchunit: this.FixElementValue(fabric.sqinchunit),
          ydsunit: fabric.ydsunit,
          bydspunit: this.FixElementValue(fabric.bydspunit),
          blbspunit: this.FixElementValue(fabric.blbspunit),
        })),
      },
    ],
  });
};

CodePudding user response:

Or another way would be to just do what you did and set the state at the end of pushing

buildDetailDB = () => {
let {detail} = this.state;
//console.log(detail)
let dms=[];
detail.dms.forEach(fabric => {
  dms.push({
    "line_id": fabric.line_id,
    "id": fabric.id,
    "dm": fabric.dm,
    "priceWhite": fabric.priceWhite,
    "priceMedium": fabric.priceMedium,
    "priceDark": fabric.priceDark,
    "priceSpecial": fabric.priceSpecial,
    "priceWhiteC": 0,
    "priceMediumC": 0,
    "priceDarkC": 0,
    "priceSpecialC": 0,
    "Blong": this.FixElementValue(fabric.Blong),
    "Bwidth": this.FixElementValue(fabric.Bwidth),
    "fabricType": fabric.fabricType,
    "weightBWashOriginal": this.FixElementValue(fabric.weightBWashOriginal),
    "weightBWashCalculated": this.FixElementValue(fabric.weightBWashCalculated),
    "dm_width": this.FixElementValue(fabric.dm_width),
    "markerWidth": this.FixElementValue(fabric.markerWidth),
    "dm_pt": fabric.dm_pt,
    "yieldydslbs": this.FixElementValue(fabric.yieldydslbs),
    "markerEfficiency": this.FixElementValue(fabric.markerEfficiency),
    "markerLong": this.FixElementValue(fabric.markerLong),
    "pieceByMarker": this.FixElementValue(fabric.pieceByMarker),
    "lbsunit": this.FixElementValue(fabric.lbsunit),
    "lbsunitwaste": this.FixElementValue(fabric.lbsunitwaste),
    "sqinchunit": this.FixElementValue(fabric.sqinchunit),
    "ydsunit": fabric.ydsunit,
    "bydspunit": this.FixElementValue(fabric.bydspunit),
    "blbspunit": this.FixElementValue(fabric.blbspunit),
  })
  this.setState({detail: {...detail, dms}})
});
  • Related