Question

我有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)

因此，即使扩展行中的每个段落都需要键属性？为什么？ 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”位于标记中，也只能显示其名称。

Answer 1

您的“ 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>
  }

p.s。 uniqueData可能是您的数据库唯一ID或其他。

希望能为您提供帮助。

Answer 2

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

此外，请确保您的<BootstrapTable>组件（因为您已经提到react-bootstrap-table2）具有一个keyField prop。

bootstrap-react-table2

2 个答案: