代码之家 › 专栏 › 技术社区 › Simon Taylor

如何向表中添加键

react-table reactjs javascript

Simon Taylor · 技术社区 · 6 年前

获取此错误:- 第一次玩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
            });
        });
    }

2 回复 | 直到 6 年前

Evgeny Timoshenko 6 年前

您正在尝试为的每个属性呈现一个表 itemData . 你应该把你的 项目数据 到反应表:

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

resolveData 被用来重塑数据,所以我想 resolveData={data => data.map(row => row)} 什么也没做。

Simon Taylor 6 年前

归根结底,其根源是状态初始化不良导致错误。在我开始之前,我将表定义转移到它自己的React类中,并确保在它具有state之前不会调用它这一部分是有效的。

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