ReactJS 如何实现动态增删表格行并保存用户输入值？

核心问题点 #

• 你的data状态是二维数组结构，但原handleOnChange函数直接把数组类型的原状态转成了对象存储，结构完全不匹配，导致后续渲染、存储逻辑全部异常
• 原handleOnChange接收的参数只有列索引，缺少行索引，无法定位到具体要修改的单元格
• 给TextField绑定onChange时传参逻辑错误，没有区分行、列索引，也无法和对应字段的属性匹配

修复步骤 #

1. 修正List组件的onChange传参 #

给TextField绑定onChange的时候，需要同时传递行索引、列索引两个参数，同时重命名内部循环的索引避免重名冲突：

// List.js 中修改items.map部分的代码
{items.map((item, colIndex) => (
  <TextField
    key={colIndex}
    label={item.label}
    value={item.value}
    onChange={handleOnChange(index, colIndex)} 
    variant="outlined"
  />
))}

2. 重写App组件的handleOnChange逻辑 #

根据行、列索引定位到具体的单元格，全程做浅拷贝遵循React状态不可变原则，修改对应value值：

const handleOnChange = (rowIndex, colIndex) => (e) => {
  setData(prev => {
    const newData = [...prev]
    // 拷贝对应行的数据避免直接修改原状态
    newData[rowIndex] = [...newData[rowIndex]]
    // 拷贝对应列的字段对象避免直接修改原状态
    newData[rowIndex][colIndex] = {
      ...newData[rowIndex][colIndex],
      value: e.target.value
    }
    return newData
  })
};

可选优化建议 #

• 行的key建议不要直接用index，后续新增删除行的时候容易出现渲染异常，可给每行生成唯一ID作为key
• 后续需要提交数据时，直接遍历data数组，把每行的propertyName和value对应提取出来即可

内容的提问来源于stack exchange，提问作者Tainara