分页在 react-bootstrap-table2 中不起作用答案

【问题标题】：Pagination not working in react-bootstrap-table2分页在 react-bootstrap-table2 中不起作用
【发布时间】：2018-09-27 13:47:34
【问题描述】：

我正在使用 react-bootstrap-table2-paginator 将分页添加到我的 BootstrapTable。在表中添加分页部分时出现以下错误。我错过了一些进口还是什么？

invariant.js:39 Uncaught Error: a.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这是组件的代码。

import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import paginationFactory from 'react-bootstrap-table2-paginator';

class OverviewComponent extends Component {
constructor(props) {
  super(props);
}
const products = [];
const columns = [{
   dataField: 'id',
   text: 'Product ID'
  }, {
   dataField: 'name',
   text: 'Product Name'
  }, {
   dataField: 'price',
   text: 'Product Price'
 }];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    products.push({
    id: id,
    name: 'Item name ' + id,
    price: 2100 + i
   });
  }
}

addProducts(12);


render() {
    return (
        <div className="container-fluid">
          <div className="row">
                 <BootstrapTable
                    striped
                    hover
                    condensed
                    maxHeight={15}
                    keyField="id"
                    data={ products }
                    columns={ columns }
                    cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
                    pagination={ paginationFactory() }
                  />
              </div>
        </div>
    );
 }
}

export default OverviewComponent;

任何帮助将不胜感激。谢谢

【问题讨论】：

大家好，我也有同样的问题。 Bootstraptable 2 可以正常工作，但是一旦我包含 paginator ，我就会在运行时出错。谢谢

标签： reactjs pagination react-bootstrap-table

【解决方案1】：

试试这个，它对我有用。我在运行时也遇到了包装器问题。

npm install react-bootstrap-table2-paginator@0.1.6 --save

此外，这仅适用于 react@16.0.0 及更高版本。您可以使用以下命令升级到最新版本的 react 和 react-dom：

npm install --save react@latest react-dom@latest

对于特定版本，只需指定版本来代替单词 latest。例如

npm install --save react@16.4.2 react-dom@16.4.2

【讨论】：

【解决方案2】：

我已经纠正了原始实现的一些错误。你想使用this.state

import React, { Component } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import cellEditFactory from "react-bootstrap-table2-editor";
import paginationFactory from "react-bootstrap-table2-paginator";

class OverviewComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      columns: [
        {
          dataField: "id",
          text: "Product ID"
        },
        {
          dataField: "name",
          text: "Product Name"
        },
        {
          dataField: "price",
          text: "Product Price"
        }
      ]
    };

    this.addProduct = this.addProduct.bind(this);
  }

  addProduct(quantity) {
    const startId = products.length;

    let { products } = this.state;

    for (let i = 0; i < quantity; i++) {
      const id = startId + i;
      products.push({
        id: id,
        name: "Item name " + id,
        price: 2100 + i
      });
    }
    this.setState({ products: products });
  }

  render() {
    const { products, columns } = this.state;
    return (
      <div className="container-fluid">
        <div className="row">
          <BootstrapTable
            striped
            hover
            condensed
            maxHeight={15}
            keyField="id"
            data={products}
            columns={columns}
            cellEdit={cellEditFactory({ mode: "dbclick" })}
            pagination={paginationFactory()}
          />
        </div>
      </div>
    );
  }
}

export default OverviewComponent;

【讨论】：