reactjs - 如何在复杂对象中设置 setState

Question

下面是我的状态对象

{
   "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": ""
        }
      }
    }
  }
 }

标签： reactjs

Answer 1

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

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