[英]Pagination not working in react-bootstrap-table2
I am using react-bootstrap-table2-paginator for adding Pagination to my BootstrapTable. 我正在使用react-bootstrap-table2-paginator将分页添加到我的BootstrapTable中。 I get the below error when I add the Pagination part in the table.
当我在表中添加分页部分时,出现以下错误。 Am I missing some imports or something ?
我缺少一些进口商品吗?
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.
Here is the code for the component. 这是组件的代码。
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;
Any help would be appreciated. 任何帮助,将不胜感激。 Thanks
谢谢
I've corrected some faults with the original implementation. 我已经纠正了原始实现的一些错误。 You want to make use of
this.state
您想利用
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;
Try this, it worked for me. 试试这个,对我有用。 I also had a problem with the wrapper at runtime.
在运行时,包装器也有问题。
npm install react-bootstrap-table2-paginator@0.1.6 --save
Also, this only works for react@16.0.0 and up. 而且,这仅适用于react@16.0.0及更高版本。 You can upgrade to the latest version of react and react-dom with this:
您可以使用以下方法升级到最新版本的react和react-dom:
npm install --save react@latest react-dom@latest
for specific version just specify the version in place of the word latest. 对于特定版本,只需指定版本来代替“最新”一词。 eg
例如
npm install --save react@16.4.2 react-dom@16.4.2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.