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

Question

我正在使用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; 

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

Answer 1

我已经纠正了原始实现的一些错误。 您想利用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;

Answer 2

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

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

对于特定版本，只需指定版本来代替“最新”一词。 例如

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