JSON.stringify() removing data from data model in React

Question

I have two versions for the same logic. Below are the two codes:

  /*Code 1*/
this.state.dataModel[0].route.routeLine = this.props.routeLine.join(' ');

/*Code 2*/
this.setState(prevState => {
    const newDataModel = [...prevState.dataModel];
    newDataModel[0].route.routeLine = this.props.routeLine.join(' ');                        
    return {dataModel: newDataModel};
                    });
/* Common Code */
let finalData = { ...this.state.dataModel[0], 
                   hasLocationChanged: this.state.isLocationEditedForConsSeg };
let data = JSON.stringify(finalData)


console.log('Stringify Data ',JSON.stringify(data))

When I use Code 1 the object is converted to JSON strings without data loss. But if I use Code 2 I am loosing data in JSON strings when using JSON.stringify().But according to my understanding of react Code 1 is not the correct way to mutate state

Below is the finalData in JSON object:

{
   "layer": 1,
   "layerName": "ConstructionSegment",
   "layerId": 7384,
   "agencyId": 79,
   "lpModel": {
      "lastProjectType": 2,
      "lastProjectSurf": 2,
      "gravelType": 0,
      "gravelTreatment": 0,
      "bitType": 1,
      "concrType": 0,
      "astType": 0,
      "compType": 0,
      "lastProjectYear": 2002,
      "lpDepth": 7,
      "totalDepth": 7,
      "lastProjectMile": "0",
      "comment": "",
      "lastProjectYearEst": 0,
      "lpDepthEst": 0,
      "totalDepthEst": 0
   },
   "bModel": {
      "topBaseType": 3,
      "topBaseDpt": 23,
      "topBaseYear": 1973,
      "topBaseTrt": 6,
      "bottomBaseType": 2,
      "bottomBaseDpt": 23,
      "bottomBaseYear": 0,
      "bottomBaseTrt": 1,
      "fabric": 0,
      "subgradeStrength": 100,
      "subgradeStrengthType": 5,
      "lastSGImpYear": 0,
      "subgradeTrt": 1,
      "topBaseTypeEst": 0,
      "topBaseDptEst": 0,
      "topBaseYearEst": 0,
      "bottomBaseTypeEst": 0,
      "bottomBaseDptEst": 0,
      "bottomBaseYearEst": 0,
      "subgradeStrengthEst": 0,
      "lastSGImpYearEst": 0
   },
   "xModel": {
      "laneWidth": 4,
      "numLanes": 2,
      "rtShoulderTotal": 5,
      "rtShoulderPaved": 0,
      "gradingYear": 1973,
      "curbs": 0,
      "inslopeRatio": 0,
      "paveSloughWidth": 0,
      "sloughRatio": 0,
      "edgelineTrt": 0,
      "centerlineTrt": 0,
      "medianType": 0,
      "medianWidth": 0,
      "rightOfWay": 100,
      "sectionOwner": 2,
      "gradingYearEst": 0
   },
   "maintenance": {
      "blade": [],
      "regravel": [],
      "reshape": [],
      "spotRep": [],
      "dustControl": [],
      "surfacing": [],
      "crackSeal": [],
      "patching": [],
      "striping": [],
      "cpr": [],
      "crackSealConcrete": [],
      "reApplyAst": []
   },
   "pavementcondition": {
      "PlannedProjType": 0
   },
   "route": {
      "id": 12804,
      "start": "47.04905, -95.722035",
      "end": "47.107359, -95.721154",
      "routeLength": "4.03",
      "routeArray": [
         "47.04906,-95.72206",
         "47.06001,-95.72184",
         "47.06281,-95.72179",
         "47.07266,-95.7216",
         "47.07647,-95.72154",
         "47.07991,-95.72149",
         "47.08224,-95.72154",
         "47.08528,-95.72169",
         "47.08749,-95.72178",
         "47.08846,-95.72179",
         "47.09029,-95.72181",
         "47.09236,-95.72178",
         "47.09425,-95.72172",
         "47.09729,-95.72154",
         "47.10185,-95.721",
         "47.10291,-95.72095",
         "47.10738,-95.72119"
      ],
      "routePointArray": [
         [
            47.04906,
            -95.72206
         ],
         [
            47.06001,
            -95.72184
         ],
         [
            47.06281,
            -95.72179
         ],
         [
            47.07266,
            -95.7216
         ],
         [
            47.07647,
            -95.72154
         ],
         [
            47.07991,
            -95.72149
         ],
         [
            47.08224,
            -95.72154
         ],
         [
            47.08528,
            -95.72169
         ],
         [
            47.08749,
            -95.72178
         ],
         [
            47.08846,
            -95.72179
         ],
         [
            47.09029,
            -95.72181
         ],
         [
            47.09236,
            -95.72178
         ],
         [
            47.09425,
            -95.72172
         ],
         [
            47.09729,
            -95.72154
         ],
         [
            47.10185,
            -95.721
         ],
         [
            47.10291,
            -95.72095
         ],
         [
            47.10738,
            -95.72119
         ]
      ],
      "startPoint": [
         [
            47.04905,
            -95.72204
         ]
      ],
      "endPoint": [
         [
            47.10736,
            -95.72115
         ]
      ],
      "waypoints": [],
      "isPolyLine": false,
      "hwyNum": "34",
      "segDesc": "",
      "routeLine": "47.04906,-95.72206 47.06001,-95.72184 47.06281,
                   -95.72179 47.07266,-95.7216 47.07647,
                   -95.72154 47.07991,-95.72149 47.08224,-95.72154 47.08528,
                   -95.72169 47.08749,-95.72178 47.08846,-95.72179 47.09029,
                   -95.72181 47.09236,-95.72178 47.09425,
                   -95.72172 47.09729,-95.72154 47.10185,-95.721 47.10291,
-95.72095 47.10738,-95.72119"
   }
}

I can see the data routeLine in the console.log() statement if I use Code 1 but I cannot see the data routeLine in the console.log() if I use Code 2

Zeno Dalla Valle · Accepted Answer · 2021-06-16T08:13:24.840

1

You are losing it becasue setState is asynchronous. If you call this.setState and soon after you read this.state you'll notice that it's not immediately updated.

See this question for further details please and setState docs.

edit1: I created a sandbox example for you. Check code in App.js, you'll se 4 click functions and a logState function. click1 and click2 do what you did in your original post, click3 and click4 propose a solution to overcome the problem.

edited Jun 16 '21 at 08:13

answered Jun 15 '21 at 19:33

Zeno Dalla Valle

957
5
16

Thank you so much. This works. I have used click 3 to overcome the problem. Thank you again for the solution. So now I understand why my setState was not working. – Souradip Roy Jun 18 '21 at 12:58

score 0 · Answer 2 · answered Jun 15 '21 at 18:31

0

Your routeLine is a string: "47.04906,-95.72206 47.06001,-95.72184 47.06281", not an array as you might think. You need to first convert it to an array, and then apply a join():

this.state.dataModel[0].route.routeLine.split(' ').join(). You might need to revise your state and make sure you are parsing data according to your expectations.

answered Jun 15 '21 at 18:31

Menelaos Kotsollaris

5,776
9
54
68

Yes `routeLine` is converted to string after using the `join()` operation which is performed on array. I am not understanding why `JSON.stringify()` is removing that from the JSON strings if I use `Code 2` instead of `Code 1` – Souradip Roy Jun 15 '21 at 19:06

JSON.stringify() removing data from data model in React

2 Answers2