bootstrap-react-table2 中的唯一键道具错误答案

【问题标题】：unique key prop error in bootstrap-react-table2bootstrap-react-table2 中的唯一键道具错误
【发布时间】：2019-11-19 04:14:36
【问题描述】：

我有 react-bootstrap-table2 并且我的 expandRow 函数正在生成

带有属性的标签。当我展开数据时，我可以看到错误

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Context.Consumer`.
    in span (at table_chart.js:796)
    in Unknown (created by Body)
    in tbody (created by Body)
    in Body (created by BootstrapTable)
    in table (created by BootstrapTable)
    in div (created by BootstrapTable)
    in BootstrapTable (created by Context.Consumer)
    in RowExpandProvider (created by Context.Consumer)
    in PaginationDataProvider (created by Context.Consumer)
    in SortProvider (created by Context.Consumer)
    in DataProvider (created by BootstrapTableContainer)
    in BootstrapTableContainer (at table_chart.js:828)
    in div (at table_chart.js:826)
    in listChart (at CallsList.js:70)
    in div (at CallsList.js:69)
    in div (at CallsList.js:68)
    in CallsList (at Home.js:36)
    in div (at Home.js:32)
    in Home (at App.js:175)
    in Route (at App.js:175)
    in Switch (at App.js:174)
    in div (at App.js:173)
    in div (at App.js:162)
    in div (at App.js:161)
    in div (at App.js:192)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:191)
    in App (at src/index.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:14)

所以即使展开行中的每个段落都需要 key 属性？为什么？ py段落里面也是span、img标签...

 renderer: row => (  
            <div className="tab">
            {Object.keys(row._source.attrs).sort().map(cell => 

  <p value={row._source.attrs[cell]}> 
                      <span className="spanTab">{cell}:</span>
                             <span className="spanTabSmall" >      <img 
 onClick={this.addColumn} field={cell} value={row._source.attrs[cell]}  
  className="icon" alt="addColumnIcon" title="insert column" src= 
{addColumnIcon} />   </span> 
                     <span className="red">{row._source.attrs[cell]} 
</span>
 </p>

问题是，我可以在生成的 html 表中看到属性

<p class="tabletd" field="attrs.call-id" value="5147447D-5D137270000333DC- 
ADC22700"><span class="spanTab">call-id: </span><span 
 class="spanTabSmall">      <img field="call-id" title="insert column" 
 value="5147447D-5D137270000333DC-ADC22700" class="icon" 
 alt="addColumnIcon" ><img field="call-id" value="5147447D- 
5D137270000333DC-ADC22700" title="filter" class="icon" alt="filterIcon"> 
<img field="call-id" value="5147447D-5D137270000333DC-ADC22700" 
 class="icon" alt="unfilterIcon" title="unfilter" ></span><span 
 class="spanTab">5147447D-5D137270000333DC-ADC22700</span></p>

但只有属性“call-id”的名称而不是值，即使它在标签中。

【问题讨论】：

标签： reactjs react-bootstrap-table

【解决方案1】：

首先，当您使用 React 时，请养成在通过 .map(...) 或任何迭代器生成的每个元素中包含 key 属性的习惯。您正在生成的段落应该有 key 属性。

另外，请确保您的 <BootstrapTable> 组件（因为您提到了 react-bootstrap-table2）具有 keyField prop。

【讨论】：

【解决方案2】：

您的“keyField”值需要使用您的列的唯一“dataField”值。

例如（注意“uniqueData”的位置）：

  render() {
    const products = [
      { uniqueData:"0001",name: "A1", address: "hewqo", open: "9:00", close: "20:00" },
      { uniqueData:"0002",name: "B2", address: "XDfsdf", open: "11:00", close: "23:00" },
      { uniqueData:"0003",name: "C3", address: "XDssddf", open: "11:00", close: "23:00" }
    ];
    const columns = [
      {
        dataField: "uniqueData",
        text: "ID"
      },
      {
        dataField: "name",
        text: "Name"
      },
      {
        dataField: "address",
        text: "Address"
      },
      {
        dataField: "open",
        text: "Open"
      },
      {
        dataField: "close",
        text: "Close"
      }
    ];

    return (
      <div>
        <BootstrapTable
          keyField="uniqueData"
          data={products}
          columns={columns}
        />
      </div>
  }

附言uniqueData 可能是您的数据库唯一 ID 或其他。

希望能帮到你。

【讨论】：