ошибка проповеди уникального ключа в bootstrap-реагировать-таблица2

Question

У меня есть response-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

Прежде всего, при работе с React включите key prop для каждого элемента, который вы генерируете с помощью .map(...) или любого итератора.У генерируемого абзаца должен быть key prop.

Кроме того, убедитесь, что ваш компонент <BootstrapTable> (так как вы упомянули response-bootstrap-table2) имеет keyField prop .