reactjs - React Table 7 唯一键警告的问题

Question

我正在使用 React Table 7 构建我的表格，并且表格呈现但我收到警告 列表中的每个子项都应该有一个唯一的“键” Prop 。我已经包含了键在 headerGroup map 和行中，但仍然收到警告。错误似乎只指向第 137 行，我在那里有一把 key

<thead>
 {headerGroups.map((headerGroup, i) => (
                <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}> ...

第 176 行我有:

<tr
                      key={row.id}
                      {...row.getRowProps()}
                      onClick={rowOnClick ? () => rowClickHandler(row.original) : () => ""}
                    >

我哪里遗漏了 key ？

表格

 <React.Fragment>
      <Row>
        <Col>
          <Table striped bordered hover size="sm" responsive {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup, i) => (
                <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
                  {headerGroup.headers.map((column) => (
                    <th
                      className={`p-2 table-header ${headerColor ? "primary-" + headerColor : "primary-deq"}`}
                      {...column.getHeaderProps()}
                    >
                      <span {...column.getSortByToggleProps()}>
                        {column.render("Header")}
                        {column.isSorted ? (
                          column.isSortedDesc ? (
                            <FontAwesomeIcon className="ml-3" icon={faArrowDown} />
                          ) : (
                            <FontAwesomeIcon className="ml-3" icon={faArrowUp} />
                          )
                        ) : (
                          ""
                        )}
                      </span>
                      <div {...column.getResizerProps()} className="resizer" />
                      {column.canResize && (
                        <div
                          {...column.getResizerProps()}
                          className={`resizer ${column.isResizing ? "isResizing" : ""}`}
                        />
                      )}
                      <div>{column.canFilter ? column.render("Filter") : null}</div>
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {page.map((row, i) => {
                prepareRow(row);
                return (
                  <React.Fragment>
                    <tr
                      key={row.id}
                      {...row.getRowProps()}
                      onClick={rowOnClick ? () => rowClickHandler(row.original) : () => ""}
                    >
                      {row.cells.map((cell) => {
                        return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                      })}
                    </tr>
                    {row.isExpanded ? (
                      <tr>
                        <td>
                          <span className="subTable">{renderRowSubComponent({ row })}</span>
                        </td>
                      </tr>
                    ) : null}
                  </React.Fragment>
                );
              })}
            </tbody>
          </Table>
          {showPagination ? (
            <Row className="mt-2 text-center">
              <Col>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => gotoPage(0)}
                  disabled={!canPreviousPage}
                >
                  <FontAwesomeIcon icon={faAngleDoubleLeft} />
                </Button>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => previousPage()}
                  disabled={!canPreviousPage}
                >
                  <FontAwesomeIcon icon={faAngleLeft} />
                </Button>
              </Col>
              <Col>
                <span>
                  Page{" "}
                  <strong>
                    {pageIndex + 1} of {pageOptions.length}
                  </strong>{" "}
                </span>
                <span>
                  | Go to page:{" "}
                  <InputGroup size="sm" style={{ width: "20%", display: "inline-flex" }}>
                    <FormControl
                      type="number"
                      defaultValue={pageIndex + 1}
                      onChange={(e) => {
                        const page = e.target.value ? Number(e.target.value) - 1 : 0;
                        gotoPage(page);
                      }}
                    />
                  </InputGroup>
                </span>{" "}
                <InputGroup size="sm" style={{ width: "30%", display: "inline-flex" }}>
                  <FormControl
                    size="sm"
                    as="select"
                    value={pageSize}
                    onChange={(e) => {
                      setPageSize(Number(e.target.value));
                    }}
                  >
                    {[5, 10, 20, 30, 40, 50].map((pageSize) => (
                      <option key={pageSize} value={pageSize}>
                        Show {pageSize}
                      </option>
                    ))}
                  </FormControl>
                </InputGroup>
              </Col>
              <Col>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => nextPage()}
                  disabled={!canNextPage}
                >
                  <FontAwesomeIcon icon={faAngleRight} />{" "}
                </Button>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => gotoPage(pageCount - 1)}
                  disabled={!canNextPage}
                >
                  <FontAwesomeIcon icon={faAngleDoubleRight} />
                </Button>
              </Col>
            </Row>
          ) : (
            ""
          )}
        </Col>
      </Row>
    </React.Fragment>

错误:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `DtsReactTable`. See https://reactjs.org/link/warning-keys for more information.
tr
DtsReactTable@http://localhost:3000/static/js/main.chunk.js:11780:23
div
./node_modules/react-bootstrap/esm/Col.js/Col<@http://localhost:3000/static/js/0.chunk.js:36550:18
div
./node_modules/react-bootstrap/esm/Row.js/Row<@http://localhost:3000/static/js/0.chunk.js:40631:18
EnforcementActionsTable@http://localhost:3000/static/js/main.chunk.js:4237:11
div
./node_modules/react-bootstrap/esm/Col.js/Col<@http://localhost:3000/static/js/0.chunk.js:36550:18
div
./node_modules/react-bootstrap/esm/Row.js/Row<@http://localhost:3000/static/js/0.chunk.js:40631:18
IncidentSummaryPage@http://localhost:3000/static/js/main.chunk.js:1056:5
ConnectFunction@http://localhost:3000/static/js/0.chunk.js:75747:75
Route@http://localhost:3000/static/js/0.chunk.js:78589:29
Switch@http://localhost:3000/static/js/0.chunk.js:78791:29
div
div
Router@http://localhost:3000/static/js/0.chunk.js:78224:30
ConnectedRouter@http://localhost:3000/static/js/0.chunk.js:17909:22
ConnectedRouterWithContext@http://localhost:3000/static/js/0.chunk.js:18014:19
ConnectFunction@http://localhost:3000/static/js/0.chunk.js:75747:75
Provider@http://localhost:3000/static/js/0.chunk.js:75460:15
App@http://localhost:3000/static/js/main.chunk.js:176:1 
    in DtsReactTable (at EnforcementActionsTable.js:149)
    in EnforcementActionsTable (at IncidentSummaryPage.js:187)
    in IncidentSummaryPage (created by Connect(IncidentSummaryPage))
    in Connect(IncidentSummaryPage) (at App.js:98)
    in Router.Consumer (created by Route)
    in Route (at App.js:95)
    in App (at src/​index.js:10) index.js:1
    e index.js:1
    r backend.js:6
    React 5
    DtsReactTable DtsReactTable.js:136
    React 9
    unstable_runWithPriority scheduler.development.js:646
    React 4
    Redux 4
    e 1040:1
    immutableStateInvariantMiddleware Immutable
    createThunkMiddleware Redux
    routerMiddleware middleware.js:22
    Redux 4
    routerMiddleware middleware.js:22
    dispatch 1040:1
    bindActionCreator Redux
    componentDidMount IncidentSummaryPage.js:50
    React 6
    unstable_runWithPriority scheduler.development.js:646
    React 9
    js index.js:10
    js main.chunk.js:13289
    Webpack 7

Answer 1

你在这段代码中的几个地方没有 key ..例如

{ headerGroup.headers.map((column) => (
    <th
        className={`p-2 table-header ${headerColor ? "primary-" + headerColor : "primary-deq"}`
        {...column.getHeaderProps()}

另一个问题可能是您的 key 不是唯一的。当您使用 ma​​p 时，您可以使用第二个参数，即迭代次数，这将保证您的键是唯一的。例如

{headerGroups.map((headerGroup, i) => ( <tr {...headerGroup.getHeaderGroupProps()} key={i}> ... 

// i instead of headerGroup.id is unique