如何更新reactjs中数组数组中存在的值

Question

工作代码：https://codesandbox.io/s/broken-https-2i454?file=/src/App.js

我在我的 reactjs 项目中使用 Material UI，我正在尝试使用文本字段的 onChange 函数更新在表的文本字段中输入的值，目前该值存在于数组数组中，我想更新 componentQuantity ，我知道传递事件以获取 event.target.value ，但是更新数组数组中存在的文本字段的特定值的正确方法是什么。请有人在这里帮助我。

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);

Answer 1

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

更改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)}
/>