Question

这是我在实现react-bootstrap-table之前的React类（它可以工作，它可以打印出它应该的内容）：

class ResultItem extends ComponentBase {

constructor(props) {
  super(props);

 this.state = {
  key: null,
  description: '',
  start_date: '',
  end_date: '',
  vendor_name: {},
  buyer_name: {},
  preview_file: '',
 };
}

render() {
 const data = this.props;
 return (
   <div>
    {data.title}
    {data.description}
    {data.start_date}
    {data.end_date}
    {data.vendor_name}
    {data.buyer_name}
   </div>
   );
  }
 }

我想在react-bootstrap表中显示这些信息。这是我尝试的实现，如下所示。该表说没有数据可以显示，所以我不能正确地连接到这些信息。

class ResultItem extends ComponentBase {

  constructor(props) {
    super(props);

    this.state = {
      key: null,
      description: '',
      start_date: '',
      end_date: '',
      vendor_name: {},
      buyer_name: {},
      preview_file: '',
    };
  }

  render() {
    const data = this.props;
    return (
      <BootstrapTable data={this.props.data}>
        <TableHeaderColumn dataField="title" isKey={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="start_date">Start Date</TableHeaderColumn>
        <TableHeaderColumn dataField="end_date">End Date</TableHeaderColumn>
        <TableHeaderColumn dataField="vendor_name">Vendor</TableHeaderColumn>
        <TableHeaderColumn dataField="buyer_name">Buyer</TableHeaderColumn>
      </BootstrapTable>
    );
  }


}

Answer 1

有一个基本的例子 https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/basic/basic-table.js

数据应该是一个对象数组，而不是一个对象我无法看到state的任何用法，因此您可能会考虑删除该部分。

Answer 2

如下更改代码：

 <BootstrapTable data={[this.props.data]}>

要提供给BootstrapTable数据的数据是一个对象。使它的阵列

如果以上答案不能解决您的问题，请检查this.props.data的类型

如果this.props.data是对象中的对象，然后将其转换成对象数组。

无法在react-bootstrap表中显示我的数据

2 个答案: