反应JS分页错误"Cannot read property 'slice' of undefined"

Question

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>
)

我正在使用上面的代码创建一个带有react bootstrap的表，并希望在表上实现分页，但我得到了以下错误。如果有任何解决方案，请告诉我：

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)

Answer 1

更改：

1-React Bootstrap table接受数据属性中的array of object，该属性应包含TableHeaderColumn中dataField中定义的密钥u。在您的情况下，environmentList应该是这样的：

[
{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不应该是undefined或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的错误。

做出应该有效的改变。