如何在 React JS 中为特定 ID 动态插入表中的输入数据？

Question

[在此我想将每个单元格的标记、id、名称的值存储在数组的对象中.. 我尝试了但没有得到正确答案请帮助我如何将每个单元格的标记和 id 存储在数组对象中

const [values, setValues] = useState(new Array(tableData.length).fill(''));

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
      <TableHead>
        <TableRow>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Roll Number
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Name
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Email
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Marks
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {tableData.map((data, index) => (
          <>
            <TableRow>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  key={index}
                  type={'text'}
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values[index]}
                  onChange={(e) => {
                    setValues(e.target.value);
                  }}
                />
              </TableCell>
            </TableRow>
          </>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

[1]：https://i.stack.imgur.com/oGvYW.png

Answer 1

1. 您应该仅为父 TableRow 元素设置 key 属性
2. 您可以将values 状态初始化为{ id, value } 形式的对象，并更新与更改的id 对应的值。 此配置应防止由于表过滤和索引不匹配而导致的潜在错误：

const [values, setValues] = useState(tableData.map(data => ({ id: data.id, value: ''})));

const handleValueChange = (e, id) => {
    const otherValues = values.filter(v => v.id !== id);
    const updatedValue = { id, value: e.target.value };
    setValues({ ...otherValues, updatedValue })
}

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
        ...
      <TableBody>
        {tableData.map((data, index) => (
            <TableRow key={data.id}>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  type='text'
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values.find(v => v.id === data.id)?.value || ''}
                  onChange={(e) => { handleValueChange(e, data.id); }}
                />
              </TableCell>
            </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);