分頁在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