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

Question

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

未捕获的筛选器:无法读取新BootstrapTableContainer (index.js:96)处未定义的属性“”TypeError“”

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;

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

Answer 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>
    );
  }
}

​