ReactJS пагинация ошибка «Не удается прочитать свойство„кусок“неопределенных»

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

Я использую выше код, чтобы создать таблицу с реагировать самозагрузки и хотите реализовать разбиение на страницы на столе, но я получаю следующее error.Kindly дайте мне знать, если любое решение:

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

Мало, что хотел сказать вам:

* React Bootstrap tablearray of object принимают в собственности данных, которые должны содержать ключи у определенных в dataField в TableHeaderColumn. В случае вас environmentList должно быть так:

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

* Так как ваш environmentList массив, вы не можете сделать его прямо в html, как это: {environmentList}, вам нужно сделать конкретное свойство, как это: {environmentList[0].name}.

* Ваш 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.

Внесите изменения, это сработает, дайте мне знать, если вам нужна какая-либо другая помощь.