我收到此警告,但不知道如何解决。我认为它必须与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)
我在控制台中两次收到此警告,并且已经检查并尝试使用这些键,但是该键不起作用,有人知道我该怎么做才能消除此警告?
编辑: 这是常规表的渲染方法,然后我针对需要的每个表使用此组件,例如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 >
)
}