JSON对象更新给出奇怪的结果答案

【问题标题】：JSON object update giving strange resultJSON对象更新给出奇怪的结果
【发布时间】：2018-04-10 07:41:21
【问题描述】：

您好，我正在更新一个具有内部数组的 json 对象，并且数组的每个对象都有 id 元素。基于 id 元素，我更新了与 inout id 匹配的元素之一，但它修改了多个对象。下面给出了我的源代码和控制台日志，这将有助于理解问题。

功能

updateUserData(event,id){
    var elementName=event.target.name;
    console.log('id='+id+', element name='+elementName);
    var userData=this.state.user_data;
    console.log('User Data before change ='+JSON.stringify(userData));
    for(var i=0;i<userData.sports.length;i++){
       for(var j=0; j<userData.sports[i].ticket_detail.length;j++){
           if(userData.sports[i].ticket_detail[j].id==id){
               for(var k=0;k<userData.sports[i].ticket_detail[j].ticket.length;k++){
                   if(userData.sports[i].ticket_detail[j].ticket[k].paramname==event.target.name){
                       userData.sports[i].ticket_detail[j].ticket[k].value=event.target.value;
                      console.log('user data after change ='+JSON.stringify(userData));
                       this.setState({user_data:userData});
                       return;
                   }
               }
           }
       }
   }
  }

控制台日志

value=h

id=0, element name=name

User Data before change =

{"total_tickets":3,"total_amount":2124,"htmlid_counter":3,"sports":[{"name":"Badminton","ticket_detail":[{"cat":"Men Singles" ,"formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{"label" :"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone","type ":"text","value":""}],"id":0},{"cat":"男人 Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{" label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone", "type":"text","value":""}],"id":1},{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{" label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone", "type":"text","value":""}],"id":2}]},{"name":"Carrom","ticket_detail":[]}],"tournament_id":1}

user data after change =

{"total_tickets":3,"total_amount":2124,"htmlid_counter":3,"sports":[{"name":"Badminton","ticket_detail":[{"cat":"Men Singles" ,"formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":"h"},{"label ":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone"," type":"text","value":""}],"id":0},{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":"h"},{ "label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone" ,"type":"text","value":""}],"id":1},{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":"h"},{ "label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone" ,"type":"text","value":""}],"id":2}]},{"name":"Carrom","ticket_detail":[]}],"tournament_id":1 }

从上面的 json 可以看出，虽然 input id=0，但是 id 为 0 、 1 和 2 的 json 对象被修改了。谁能帮我解决这个问题。

【问题讨论】：

标签： reactjs

【解决方案1】：

您在每次迭代时都在执行异步 setState。这可能就是您得到奇怪结果的原因。

您必须构建一个新数组，然后，在您的数组是您最终想要的状态之后，您可以这样做：

this.setState({ user_data: newArray })

【讨论】：

我也这样做了，但没有帮助
我发现了问题。发生此问题是因为数组的每个元素都具有对公共元素的引用。这就是我在修改其中任何一个时，都被修改的原因。

【解决方案2】：

我发现了问题。发生此问题是因为数组的每个元素都具有对公共元素的引用。这就是为什么我在修改其中任何一个时，都被修改了。

【讨论】：