我在哪里缺少关键道具？我正在为 TableCell 键生成 uuid，我正在使用 row.id 作为行键

Question

我在这段代码中收到了警告：

Each child in a list should have a unique "key" prop. Check the render method of AllPersonnel... at TableRow

并且 table 单元格未呈现。任何帮助，将不胜感激。谢谢！

       <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow key={uuidv4()}>
                  {cols.map((col) => {
                    return <TableCell key={col.path}>{col.name}</TableCell>
                  })}
                </TableRow>
              </TableHead>
    
              <TableBody>
    
                {personnel.map((row, i) => { 
                  return (
                    
                    <TableRow key={row.id}>
                      <TableCell key={uuidv4()}>{row.first_name}</TableCell>
                      <TableCell key={uuidv4()}>{row.last_name}</TableCell>
                      <TableCell key={uuidv4()}>{row.section}</TableCell>
                      <TableCell key={uuidv4()}>{row.role}</TableCell>
                      <TableCell key={uuidv4()}>{row.employee_type}</TableCell>
                    </TableRow>
                    
                  );
                })} 
              </TableBody>
            </Table>
          </TableContainer>

Answer 1

您的 TableRow 不需要键，只需要迭代器 return 中的第一个子项。尝试：

{personnel.map((row, i) => {
    const key = uuidv4()
              return (
                <TableRow key={key}>
                  <TableCell>{row.first_name}</TableCell>
                ...

通常...

我在哪里缺少关键道具？我正在为 TableCell 键生成 uuid，我正在使用 row.id 作为行键

Where am I missing a key prop here? I'm generating uuids for TableCell keys and I'm using row.id for the row keys

reactjs

material-ui

uuid