React表格未同步更新新增数据集问题求助

你遇到的核心问题是：直接修改全局数组不会触发React组件重新渲染。React只会在组件的state或props发生变化时，才会重新执行render方法更新UI，你现在操作的是组件外的全局tblData，改动后组件感知不到，所以表格没变化。

具体修复步骤 #

• 删除组件外的全局const tblData = []，完全用组件内部state管理表格数据
• 触发Enter键时，通过this.setState()更新state，注意要创建新数组（不能直接push原数组，因为React依赖引用变化判断更新）
• 表格渲染时，遍历this.state.tblData而非全局变量
• 修正TableRow的key值（你之前用的row.name不存在，会导致key异常）

修改后的完整代码 #

function createData(hardware, cost, status) {
  return { hardware, cost, status };
}

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tblData: [], // 用内部state管理表格数据
    };
  }

  render() {
    return (
      <>
        <Box
          sx={{
            width: 500,
            maxWidth: '100%',
          }}
        >
          <TextField
            fullWidth
            label="Scan Here"
            id="fullWidth"
            onKeyPress={(e) => {
              if (e.key === 'Enter') {
                console.log('Enter key pressed');
                // 用扩展运算符创建新数组，更新state
                this.setState(prevState => ({
                  tblData: [...prevState.tblData, createData('blah', 356, 'Yes')]
                }));
              }
            }} />
        </Box>
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 650, marginTop: '10px' }} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Hardware</TableCell>
                <TableCell align="right">Cost</TableCell>
                <TableCell align="right">status</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {/* 遍历state中的tblData */}
              {this.state.tblData.map((row, index) => (
                <TableRow
                  key={index} // 临时用索引当key，若hardware字段唯一，改用row.hardware更优
                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                >
                  <TableCell component="th" scope="row">
                    {row.hardware}
                  </TableCell>
                  <TableCell align="right">{row.cost}</TableCell>
                  <TableCell align="right">{row.status}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </>
    )
  }
}

export default Main;

额外说明 #

• 用prevState获取之前的state是因为setState是异步操作，这样能确保拿到最新的数组状态
• 若hardware字段是唯一标识，把key改成row.hardware比用索引更好，能避免列表重排时的性能问题

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