如何在 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 state 初始化為{ id, value }形式的 object 並更新與更改的 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>
);