Как добавить ключ к таблице

Question

Получение этой ошибки: - Игра с реакцией и реактивной таблицей в первый раз.Используя этот код: -

render() {
        const itemData = this.state.itemData;

        const columns = [{
            Header: 'ID',
            Cell: props => <span key={props.value}>{props.value}</span>,
            accessor: 'ID',

        }, {
            Header: 'Name',
            accessor: 'name'

        },{
            Header: 'Description',
            accessor: 'description'

        }, {
            id: 'price', // Required because our accessor is not a string
            Header: 'Price',
            accessor: d => d.price // Custom value accessors!
        }]


        console.log(itemData)
        console.log(columns)
        return (
            <div>
                <CreateItemModal getItems={this.getItems}/>
                {_.map(itemData, () => (
                <ReactTable key={itemData.ID}
                    data={itemData}
                    resolveData={data => data.map(row => row)}
                    columns={columns}
                />
                ))}
            </div>
        );
    }

Получение этой ошибки: -

index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `ItemDashboard`. 
    in ReactTable (at itemDashboard.js:77)
    in ItemDashboard (at App.js:28)
    in div (created by Segment)
    in Segment (at App.js:22)
    in App (at index.js:9)

ItemData представляет собой массив этого: -

ID:"78edeef0-6105-11e8-a64e-25cbecc86b8a"
description:"hdhdhdhdhd"
name:"this"
price:"88888"

Я не могу найтиправильный документ, чтобы сказать мне, как добавить ключ к каждой строке таблицы.Можете ли вы указать мне правильное направление?

КОД ИНИЦИАЛИЗАЦИИ: -

class ItemDashboard extends Component {

    constructor(props){
        super(props)
        this.state = {itemData: {}, item: {}, modalOpen: false}
        this.getItems = this.getItems.bind(this);

    }

    getItems(){
        API.get(apiName, path).then(response => {
            console.log(response)
            this.setState({
                itemData: response.data
            });
        });
    }

Answer 1

В конце концов, причиной этого была плохая инициализация состояния, вызывающая ошибки.Прежде чем я дошел до этого, я переместил определение таблицы в ее собственный класс React и убедился, что он не вызывается, пока не получит состояние.Эта часть проверяет.

if(this.state.itemData != undefined && this.state.itemData != null && JSON.stringify(this.state.itemData) != "{}") {
        console.log("Rendering TableOfRows")
        console.log("DATA:" + JSON.stringify(this.state.itemData))
        return (
            <div>

                <TableOfRows columns={columns}
                             data={this.state.itemData}/>
            </div>

        );
    } else {
        return (
            <div>

            </div>
        )
    }

Эта часть выполняет рендеринг: -

import React, {Component } from 'react';
import ReactTable from 'react-table';

// import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from 'semantic-ui-react'


class TableOfRows extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: props.data,
            columns: props.columns
        }
        console.log("TOF Constructor" + JSON.stringify(this.state))
    }

    render() {

        console.log("DATA after this")
        console.log(this.state.data)


        return (
            <ReactTable
            multiSort={true}
            filterable={true}
            data={this.state.data}
            columns={this.state.columns}
            />
        );
    }
}

Answer 2

Вы пытаетесь отобразить таблицу для каждого свойства itemData.Вам просто нужно передать ваш itemData в таблицу реакций:

return (
  <div>
      <CreateItemModal getItems={this.getItems}/>
      <ReactTable
          data={itemData}
          columns={columns}
      />
  </div>
);

resolveData используется для изменения формы данных, поэтому я думаю, resolveData={data => data.map(row => row)} ничего не делает.