2 
var environmentList=this.state.returnJSONValue;
console.log("result for: environmentList hi :"+this.state.returnJSONValue);

return (
    <div>
        <div className="row">
            <div className="col-lg-12">
                <h3 className="page-header">
                    Docker Images
                </h3>
            </div>
        </div>
        <div className="row">
            <div className="col-lg-3 col-md-6">
                   {environmentList}
            </div>
        </div>

        <BootstrapTable data={environmentList} striped hover pagination>
            <TableHeaderColumn isKey dataField='id'>#</TableHeaderColumn>
            <TableHeaderColumn dataField='name'>Environment</TableHeaderColumn>
            <TableHeaderColumn dataField='price'>Deploy</TableHeaderColumn>
        </BootstrapTable>

    </div>
)

I am using above code to create a table with react bootstrap and want to implement pagination on the table but i am getting the following error.Kindly let me know if any solution:

index.js:56493 Uncaught TypeError: Cannot read property 'slice' of undefined
    at new BootstrapTable (index.js:56493)
    at ReactCompositeComponentWrapper.mountComponent (index.js:14894)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (index.js:9084)
    at Object.mountComponent (index.js:13276)
    at ReactDOMComponent.mountChildren (index.js:21846)
    at ReactDOMComponent._createContentMarkup (index.js:19021)
    at ReactDOMComponent.mountComponent (index.js:18909)
    at Object.mountComponent (index.js:13276)
    at ReactCompositeComponentWrapper.mountComponent (index.js:14971)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (index.js:9084)
4

1 回答 1

1

变化：

1- React Bootstrap table在数据属性中接受，该属性应包含您在中array of object定义的键。在你的情况下应该是这样的：dataFieldTableHeaderColumnenvironmentList

[
  {id:1, name: 'A', price: 1},
  {id:2, name: 'B', price: 2}, 
  {id:3, name: 'C', price: 3}
]

2-由于你environmentList是一个数组，你不能html像这样直接渲染它：{environmentList}，你需要像这样渲染特定的属性：{environmentList[0].name}。

3-你environmentList不应该是undefinedor null，否则表格会抛出错误，以确保使用它environmentList || []，

<BootstrapTable data={environmentList || []} striped hover pagination>
    <TableHeaderColumn isKey={true} dataField='id'>#</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Environment</TableHeaderColumn
    <TableHeaderColumn dataField='price'>Deploy</TableHeaderColumn>
</BootstrapTable>

我认为你得到的error只是因为那个，如果你environmentList是正确的，那么JSX就会抛出错误render an array in html。

进行应该有效的更改。

于 2017-02-01T10:02:30.167 回答