如何在REACT JS中为onChange事件更新JSON对象的状态？

Question

我的状态为myrecords []，其中包含以下格式的JSON对象：{    "records": {        "Master Automotives": [            {                "SparePartID": "43",                "Name": "Oil and Lubricants",                "Price": "4500",                "VendorID": "48",                "CompanyName": "Master Automotives",                 "Qty": 1,                 "TotalPrice": "4500"            },            {                "SparePartID": "45",                "Name": "Lights",                "Price": "2300",                "VendorID": "48",                "CompanyName": "Master Automotives",                 "Qty": 1,                 "TotalPrice": "2300"            }        ],        "Repair Solutions": [            {                "SparePartID": "47",                "Name": "Steering Wheel",                "Price": "1500",                "VendorID": "60",                "CompanyName": "Repair Solutions",                 "Qty": 1,                 "TotalPrice": "1500"            }        ],                 "FiveStar Automotives": [            {                "SparePartID": "51",                "Name": "Brakes",                "Price": "234",                "VendorID": "70",                "CompanyName": "FiveStar Automotives",                 "Qty": 1,                 "TotalPrice": "234"            },            {                "SparePartID": "53",                "Name": "Clutch",                "Price": "999",                "VendorID": "70",                "CompanyName": "FiveStar Automotives",                 "Qty": 1,                 "TotalPrice": "999"            },现在，Im在react js中显示此记录，其方式是所有项目均按行显示并按其CompanyNames分组，并且针对每个Item都有一个“数量”输入字段。默认情况下，数量为1，因此TotalPrice与UnitPrice相同。现在，我希望对Qty的任何特定输入字段进行onChange，JSON对象中相应的 TotalPrice项目也应在myrecords []状态下进行更新。同样，数量也应在myrecords []状态下进行更新。

Answer 1

首先改变这个

{this.state.myrecords[CompanyName].map((product, i) => (

至

{this.state.myrecords[CompanyName].map((product, j) => (

因为我们已经在上面的地图中使用了i。

然后改变这个

onChange={(e) => this.onChangeQty(product["SparePartID"], e)}

至

onChange={(e) => this.onChangeQty(CompanyName, j, e)}

然后你的onChange应该是

onChangeQty(CompanyName,j,e)

{

   const items = {...this.state.myrecords};

  items[CompanyName][j].Qty = e.target.value;

  items[CompanyName][j].TotalPrice = e.target.value * items[CompanyName][j].Price;

  this.setState({

     myrecords: items

   });

}

如果您不喜欢基于Change的索引，也可以按照以下方式（基于SID）进行操作。只需传递CompanyName,sid,e)此功能onChange={(e) => this.onChangeQty：

onChangeQty(CompanyName,sid,e)

{

   const items = {...this.state.myrecords};

  const j = items[CompanyName].findIndex(item => item.SparePartID === sid);

  items[CompanyName][j].Qty = e.target.value;

  items[CompanyName][j].TotalPrice = e.target.value * items[CompanyName][j].Price;

  this.setState({

     myrecords: items

   });

}

警告：代码未经测试。请检查并让我知道 ：）

Answer 2

问题是this.state.myrecords一个对象，因此我们不能直接使用find它。另外，您还需要使用更新程序功能（有关更多详细信息，请参阅doc）。

您的问题的解决方案是：在onChange函数中也传递companyName，然后仅运行特定公司详细信息数组的循环。传递公司名称将帮助您轻松更新状态，否则，您需要在所有阵列上运行循环。

像这样：

onChange={(e) => this.onChangeQty(product["SparePartID"], CompanyName, e)}

onChangeQty(sid, companyName, e) {

  const value = e.target.value;

  this.setState(prevState => {

    return {

      myrecords: {

        ...prevState.myrecords,

        [companyName]: prevState.myrecords[companyName].map(el => {

          if(el.SparePartID === sid) {

            return { ...el, Qty: value, TotalPrice: (el.price * value) }

          }

          return el;

        });

      }

    }

  };

}