如何在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;        });      }    }  };}