Javascript 如何更新reactjs中数组的数组中的值

工作代码：

我在我的reactjs项目中使用Material UI，我正在尝试使用文本字段的onChange函数更新表的文本字段中输入的值，当前该值存在于数组数组中，我想更新

组件数量

，我知道传递事件以获取

事件.target.value

，但是，更新数组中存在的textfield的特定值的正确方法是什么。请有人帮帮我

class TabData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [
        {
          BomComponentCode: "345543",
          BomComponentName: "COMP1",
          BomComponentRefUOM: "gm",
          rowId: 0,
          consumptionBatchNumbers: [
            {
              componentBatchNumber: "20",
              componentQuantity: 2
            },
            {
              componentBatchNumber: "21",
              componentQuantity: 3
            }
          ]
        },
        //2nd cloumn
        {
          BomComponentCode: "5543",
          BomComponentName: "COMP2",
          BomComponentRefUOM: "KG",
          rowId: 1,
          consumptionBatchNumbers: [
            {
              componentBatchNumber: "22",
              componentQuantity: 4
            },
            {
              componentBatchNumber: "23",
              componentQuantity: 5
            }
          ]
        }
      ],
      renderState: false
    };
  }

  handleUpdate = (index, Code) => {
    
    this.setState({
      renderState: Code
      
    });
  };

  handleChange = (e) => {
   
    console.log(e.target.value)
  };
  render() {
    const { classes } = this.props;
    const { data, renderState } = this.state;
    return (
      <div className={classes.list}>
        <React.Fragment>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            className={classes.grid}
            style={{ paddingLeft: "0" }}
          >
            <p variant="h6" className={classes.font}>
              Table Details
            </p>
            <span className={classes.borders}></span>
          </Grid>

          <div>
            <TableContainer component={Paper} className={classes.paper}>
              <Table className={classes.table} aria-label="collapsible table">
                <TableHead>
                  <TableRow>
                    <TableCell> Number</TableCell>
                    <TableCell> Text</TableCell>
                    <TableCell>UOM</TableCell>
                    <TableCell> Batch </TableCell>
                    <TableCell> Quantity</TableCell>
                    <TableCell>Actions</TableCell>
                  </TableRow>
                </TableHead>

                <TableBody>
                  <React.Fragment>
                    {data.map((item, i) => (
                      <React.Fragment>
                        <TableRow key={i}>
                          <TableCell scope="row" align="left">
                            {item.BomComponentCode}
                          </TableCell>
                          <TableCell align="left">
                            {item.BomComponentName}
                          </TableCell>
                          <TableCell align="left">
                            {item.BomComponentRefUOM}
                          </TableCell>
                          <TableCell>
                            {item.consumptionBatchNumbers.map((row, i) => (
                              <div key={i}>
                                <TableCell align="left">
                                  {row.componentBatchNumber}
                                </TableCell>
                              </div>
                            ))}
                          </TableCell>
                          {renderState === item.BomComponentCode ? (
                            <TableCell align="left">
                              {item.consumptionBatchNumbers.map((row, indi) => (
                                <div key={indi}>
                                  <input
                                    // value={row.componentQuantity}
                                    onChange={(e) =>
                                      this.handleChange(e)
                                    }
                                    defaultValue={row.componentQuantity}
                                  />
                                </div>
                              ))}
                            </TableCell>
                          ) : (
                            <TableCell align="left">
                              {item.consumptionBatchNumbers.map((row, indi) => (
                                <div key={indi}>
                                  <TableCell align="left">
                                    {row.componentQuantity}
                                  </TableCell>
                                </div>
                              ))}
                            </TableCell>
                          )}

                          <TableCell>
                            <button
                              onClick={() =>
                                this.handleUpdate(i, item.BomComponentCode)
                              }
                            >
                              Update
                            </button>
                          </TableCell>
                        </TableRow>
                      </React.Fragment>
                    ))}
                  </React.Fragment>
                </TableBody>
              </Table>
            </TableContainer>
          </div>

          <Grid container justify="center">
            <Grid
              item
              xs={4}
              sm={4}
              md={2}
              style={{
                textAlign: "center",
                padding: "1rem"
              }}
            >
              <button >Close</button>
            </Grid>
          </Grid>
        </React.Fragment>
      </div>
    );
  }
}

export default (TabData);

类TabData扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
数据：[
{
BomComponentCode:“345543”，
BOMC组件名称：“组件1”，
BomComponentRefUOM：“gm”，
rowId:0，
消耗批次编号：[
{
组件批次编号：“20”，
组件数量：2
},
{
组件批次编号：“21”，
组件数量：3
}
]
},
//第二回合
{
BOMC组件代码：“5543”，
BOMC组件名称：“组件2”，
BomComponentRefom：“KG”，
罗维德：1，
消耗批次编号：[
{
组件批次编号：“22”，
组件数量：4
},
{
组件批次编号：“23”，
组件数量：5
}
]
}
],
渲染状态：false
};
}
handleUpdate=（索引、代码）=>{
这是我的国家({
renderState:代码
});
};
handleChange=（e）=>{
console.log（例如target.value）
};
render（）{
const{classes}=this.props；
const{data，renderState}=this.state；
返回(

表格详情

数
正文
计量单位
批处理
量
行动
{data.map（（项目，i）=>(
{item.BomComponentCode}
{item.BomComponentName}
{item.bomcomponentreefuom}
{item.consumptionBatchNumber.map（（行，i）=>(
{row.componentBatchNumber}
))}
{renderState===item.BomComponentCode(
{item.consumptionBatchNumber.map（（行，独立）=>(
本手册更改（e）
}
defaultValue={row.componentQuantity}
/>
))}
) : (
{item.consumptionBatchNumber.map（（行，独立）=>(
{row.componentQuantity}
))}
)}
此.handleUpdate（i，项.BomComponentCode）
}
>
更新
))}
接近
);
}
}
导出默认值（TabData）；

要修改深度嵌套数组中的值，需要索引。一旦有了索引，更改值就更容易了

更改

handleChange

方法以接受行和深度嵌套行的索引

onChange={(e) => this.handleChange(e, i, indi)}

一旦有了索引，我们就可以深度克隆原始状态，创建状态的新副本，并直接对其进行变异

 handleChange = (e, rowIndex, consumptionBatchIndex) => {
    // deep clone the data 
    const clonedData = JSON.parse(JSON.stringify(this.state.data));

    clonedData[rowIndex].consumptionBatchNumbers[
      consumptionBatchIndex
    ].componentQuantity = e.target.value;
    this.setState({
      data: clonedData
    });
  };

现在我们可以将输入中的值读取为

<input
   value={row.componentQuantity}
   onChange={(e) => this.handleChange(e, i, indi)}
/>

this.handleChange（e，i，indi）}
/>

还可以将

const clonedData

写为

const clonedData=[…this.state.data]

这将创建数组的副本。@仅当数组具有字符串、数字、布尔值等基元值时，此操作才会创建副本。对于包含具有嵌套对象的对象的数组（在本例中）。使用“排列”操作符将仅创建浅层副本。对于深度复制，上述方法更简单。