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

我正在使用上面的代码创建一个带反应引导程序的表，并希望在表上实现分页，但我收到以下错误。请告诉我是否有任何解决方案：

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，其中应包含dataField中TableHeaderColumn中定义的密钥。在你的情况下，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错误。

进行改变应该有效。

ReactJS分页错误“无法读取未定义的属性'slice'

1 个答案: