Question

0

282

Views

setState of multiple objects - React JS

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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T09:07:11.127Z

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(prevState => ({
    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),
        })),
      },
    ],
  }));
};

@eduardorh1312 Added that prevState callback parameter.

Answer 2 · 2022-06-30T09:07:11.135Z

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

0

282

setState of multiple objects - React JS

2 answers

0

0

Find remote jobs

Andres GPT