如何在复杂对象中设置 setState答案

【问题标题】：How to set setState in complex object如何在复杂对象中设置 setState
【发布时间】：2019-09-20 21:48:19
【问题描述】：

下面是我的状态对象

{
   "customerdata":[
      {
         "name":"COMPANYNAME",
         "title":"Company Name",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"CONTACT_FULL_NAME",
         "title":"Contact Name",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"PHONENUMBER",
         "title":"Phone Number",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"INDUSTRYTYPE",
         "title":"Industry Type",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"ADDRESS_CITY",
         "title":"Address City",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"FOLLOWUP",
         "title":"Follow Up",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"IID",
         "title":"IID",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"HASMORELINKS",
         "title":"Has More Links",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"ISNEWOREDITED",
         "title":"Is Now Order",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"BASECURRENCYIID",
         "title":"Base Currency",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      }
   ],
   "isAttrcall":true,
   "linedata":{
      "name":"COMPANYNAME",
      "title":"Company Name",
      "isvisible":false,
      "Attrib":{
         "caption":"",
         "TextWrap":"",
         "Bold":false,
         "Italic":false,
         "Font Name":"",
         "FontSize":"",
         "FontColor":"",
         "BackGroundColor":"",
         "Height":"",
         "Width":""
      }
   }
}

我将第 0 个索引数据传递给另一个组件，在那里我正在更新值并将更新后的值返回给主组件。

{
   "name":"COMPANYNAME",
   "title":"Company Name",
   "isvisible":false,
   "Attrib":{
      "caption":"adasd",
      "TextWrap":"",
      "Bold":false,
      "Italic":false,
      "Font Name":"",
      "FontSize":"",
      "FontColor":"",
      "BackGroundColor":"",
      "Height":"",
      "Width":""
   }
}

如何更新主状态？

在此示例中，我将标题更新为“adasd”。

需要帮助...

我尝试在主组件中打印控制台日志，我可以看到这些值。

这是来自子组件的数据

{
  "_state": {
    "data": {
      "linedata": {
        "name": "COMPANYNAME",
        "title": "Company Name",
        "isvisible": false,
        "Attrib": {
          "caption": "adasd",
          "TextWrap": "",
          "Bold": false,
          "Italic": false,
          "Font Name": "",
          "FontSize": "",
          "FontColor": "",
          "BackGroundColor": "",
          "Height": "",
          "Width": ""
        }
      }
    }
  }
 }

【问题讨论】：

欢迎来到stackoverflow。请向我们展示您迄今为止为更新状态所做的尝试。
这是一个间接答案（hints），所以你必须谷歌它。首先获取状态对象并搜索必要的公司。如果存在，请将其保存在变量中或根据需要更新其标题和其他属性。然后在 setState 中设置这个新/修改状态并更新状态。您还必须考虑添加新公司价值的情况。请注意，请确保您使用不变性的概念。对象是使用引用复制的，所以如果直接使用会有副作用
你能摆脱数组，只将你的状态重组为一个对象吗？我认为这会使更新状态更容易。在这个主题上检查我的question

标签： reactjs

【解决方案1】：

您需要使用 prevState 数据更新状态，并首先从列表中删除要修改的项目（例如按名称过滤）。像这样的：

const updateStateFunction = (updatedLineData) => {
  this.setState(prevState => ({
    ...prevState,
    linedata: updatedLineData,
  }));
}

【讨论】：

this.setState(prevState=>({...prevState,customerdata:{ ...prevState.cusomerdata[linedata1],Attrib:{ ...prevState.customerdata[linedata1].Attrib, "caption":"abcdf" } } } ) ) } 这是我在 setState 方法中所做的
我不明白那你想达到什么目的...... customerdata 和 linedata 是干什么用的？
Customerdata 是包含所有数据的状态对象。客户数据之一被传递给另一个组件（子组件）子组件更新值，然后单击子组件中的按钮，它将调用主组件中的函数将更新的值作为_state（包含行数据）传递给我想要将此更新后的行数据更新为主要组件中的状态对象。
updateAttrvalue(_state){ var someproperty = {...this.state.customerdata[0]}; someproperty=JSON.parse(JSON.stringify(_state.data.linedata)) const linedata1 = this.state.customerdata.findIndex(u=>u.name===_state.data.linedata.name) var someproperty1 = {. ..this.state.customerdata[linedata1].Attrib}; this.setState(prevState=>({...prevState,customerdata:{ ...prevState.cusomerdata[linedata1],Attrib:{ ...prevState.customerdata[linedata1].Attrib, "caption":"abcdf" } } }))}
仍然很困惑...如果我理解正确，您想使用作为参数的新对象更新主状态中的“linedata”键。我已经更新了上面的函数：您收到 updatedLineData 这是来自子组件的更新数据，然后您在主组件的 linedata 中分配该 updatedLineData。