reactjs - inovua 反应数据网格 - 扩展行的唯一键警告

Question

我目前正在使用带有“网格详细信息”可扩展行功能的 inovua 反应数据网格。我遇到了一个奇怪的问题，每次展开一行时，都会收到以下警告：

列表中的每个孩子都应该有一个唯一的“关键”道具。警告

这是一个非常标准的警告，我之前已经处理过。我在整个网格和表格单元格中添加了许多键来使其静音，但它不会消失。这是我的 renderRowDetails 函数代码（渲染可扩展行的 inovua 网格函数）：

<div
  key={`${data.id}-${data.simId}`}      // Tried adding key here
  style={{
    padding: "10px 20px 20px 20px",
    marginTop: "15px",
    backgroundColor: "#bed7eb", // "#cee1f0"
  }}
>
  <h3 style={{ marginTop: "0px", marginBottom: "5px" }}>
    Sim {data["simId"]}
  </h3>
  <DropdownGrid
    headers={DROPDOWN_GRID_COLUMNS}
    rowData={dropdownData}
    gridKey={data.id}             // Passed key as props here
  />
</div>

这是我使用 Material UI 表构建的 DropdownGrid 组件（因为它是一个非常简单的单行网格）：

<TableContainer component={Paper}>
  <Table className={classes.table} size="small" aria-label="dropdown-grid">
    <TableHead>
      <TableRow>
        {headers.map((headerName: string, i: number) => (
          <TableCell key={`${gridKey}-${headerName}-${i}`}>    // Key again here
            {titleCase(headerName)}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        {rowData.map((columnValue: any, i: number) => (
          <TableCell key={`${gridKey}-${columnValue}-${i}`}>   // and here
            {columnValue}
          </TableCell>
        ))}
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

基本上我只是在渲染一个带有一行标题、一行列的表格。我将必要的数据映射到表格单元格中，每个单元格都有一个相对复杂的键。

我也尝试向 TableRow 组件添加一个键，但这也不是问题。

警告给了我这个问题的根源：

at div
at DataGridRow (http://localhost:3000/static/js/vendors~main.chunk.js:6215:34)
at InovuaVirtualListRow (http://localhost:3000/static/js/vendors~main.chunk.js:53209:34)

那么也许它是父组件中的 div ？但是我在那里添加了一个密钥，如您在上面看到的......

任何帮助是极大的赞赏！谢谢！！

标签： reactjsmaterial-uiunique-keyreact-data-grid