0

出现此错误：- 第一次使用 react 和 react-table。使用此代码：-

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
            });
        });
    }
4

2 回答 2

1

You are trying to render a table for each property of itemData. You should just pass your itemData to the react-table:

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

resolveData is being used to reshape the data, so I guess resolveData={data => data.map(row => row)} is doing nothing.

于 2018-05-27T14:04:05.833 回答
0

最后，其根源是状态初始化不佳导致错误。在开始之前，我将表定义转移到它自己的 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}
            />
        );
    }
}
于 2018-05-27T23:49:04.553 回答