获取 react-bootstrap-table 的错误消息答案

【问题标题】：Getting error message for react-bootstrap-table获取 react-bootstrap-table 的错误消息
【发布时间】：2020-04-14 14:09:55
【问题描述】：

我已经通过 npm 安装了“react-bootstrap-table2”，并且我已经为 table 编写了示例代码，但是当我运行此代码并在浏览器控制台中收到错误消息时，

未捕获的类型错误：无法读取未定义的属性“过滤器” 在新的 BootstrapTableContainer (index.js:96)

import React, { Component } from 'react';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

class UserList 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'
      }];
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

export default UserList;

【问题讨论】：

标签： reactjs

【解决方案1】：

在constructor 类中定义时，变量不是用const 定义的，而是在this 上定义。

constructor(props) {
  super(props);
  this.products = [];
  this.columns = [{
      dataField: 'id',
      text: 'Product ID'
    }, {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price'
    }];
}

【讨论】：

【解决方案2】：

你没有在构造函数中为this.products分配任何东西

class UserList extends Component {

  constructor(props) {
    super(props);
    // const products = []; 
    this.products = []; // this.products should be assigned some value/array
    const columns = [{
        dataField: 'id',
        text: 'Product ID'
      }, {
        dataField: 'name',
        text: 'Product Name'
      }, {
        dataField: 'price',
        text: 'Product Price'
      }];
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

这可能有效，但不是一个好方法。数据应该在状态变量中，因此当您更新状态时，您的组件将被重新渲染并显示新的更改，否则更新 this.products 将不会触发重新渲染并且组件将显示过时的数据。

class UserList extends Component {

  constructor(props) {
    super(props);
    // const products = [];
    this.state = { products: [] };
    const columns = [{
        dataField: 'id',
        text: 'Product ID'
      }, {
        dataField: 'name',
        text: 'Product Name'
      }, {
        dataField: 'price',
        text: 'Product Price'
      }];
  }
  
  componentDidMount = async () => {
    // Get data from some api and then update the state
    const res = await fetch('/some url');
    const products = await res.json();
    this.setState({ products });
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

【讨论】：