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

Question

我收到此警告，但我不知道如何解决。我认为它必须与 react-tables-2 一起使用，完整的警告是这样说的：

index.js:1375 Warning: Each child in a list should have a unique "key" prop. See..
in Cell (created by ReactTable)
in div (created by TdComponent)
in TdComponent (created by ReactTable)
in div (created by TrComponent)
in TrComponent (created by ReactTable)
in div (created by TrGroupComponent)
in TrGroupComponent (created by ReactTable)
in div (created by Tbody)
in Tbody (created by ReactTable)
in div (created by TableComponent)
in TableComponent (created by ReactTable)
in div (created by ReactTable)
in ReactTable (at CustomReactTable.js:106)
in div (at CustomReactTable.js:99)
in CustomReactTable (created by Context.Consumer)
in withRouter(CustomReactTable) (at ProductIndexComponent.js:69)
in div (at ProductIndexComponent.js:68)
in ProductIndexComponent (created by Context.Consumer)
in withRouter(ProductIndexComponent) (created by Context.Consumer)
in Route (at Wrapper.js:38)
in div (created by Sidebar)
in div (created by Sidebar)
in Sidebar (at SideBar.js:62)
in div (at SideBar.js:61)
in SideBar (created by Context.Consumer)
in withRouter(SideBar) (at Wrapper.js:36)
in div (at AuthenticatedComponent.js:33)
in AuthenticatedComponent (created by Context.Consumer)
in withRouter(AuthenticatedComponent) (at Wrapper.js:35)
in div (at Wrapper.js:34)
in Wrapper (created by Context.Consumer)
in Route (at App.js:28)
in Switch (at App.js:26)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:25)
in div (at App.js:24)
in App (at src/index.js:10)

我在控制台中两次收到此警告，我检查并尝试使用这些键但它不起作用，有谁知道我应该怎么做才能消除此警告？

编辑： 这是通用表的render方法，然后我对我需要的每个表都使用这个组件，例如ProductTable，我调用这个组件。

render() {
return (
  <div className='main-content'>
    {this.state.showDelete && (
      <DeleteComponent onCancelDeleteClick={this.onCancelDeleteClick} item={this.state.item} />
    )}
    <h3>{this.props.modelName}</h3>
    {this.loadAddButton()}
    {this.loadFunctionalities()}
    <ReactTable
      data={this.state.data}
      columns={this.props.columns}
      manual
      onFetchData={this.onFetchData}
      pages={this.state.pages}
    >
    </ReactTable>
    <div className="total-records-tag">{this.props.modelName}: {this.state.totalItems}</div>
  </div >
)

} }

ProductComponent 渲染方法

  render() {
return (
  <div className='main-content'>
    <CustomReactTable columns={this.state.columns} modelName={"Products"} />
  </div >
)

}

Answer 1

React 通过仅渲染需要刷新的内容进行优化。循环可以倒出要渲染的非唯一组件。 可以通过 key 属性来解决。

假设您有一个员工对象列表。 假设每个员工都有一个 id

employees.map(x=> <MyComponent key={x.id}/>)

始终为键使用唯一值。在这种情况下，就像员工 ID 一样。不要使用数组索引。