0

这是我在实现 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-table 中显示这些信息。这是我尝试的实现，如下所示。表格上说没有要显示的数据，所以我一定没有正确连接到信息。

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


}
4

2 回答 2

1

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

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

于 2018-03-03T10:33:06.097 回答
0

更改您的代码如下：

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

您提供给 BootstrapTable 数据的数据是一个对象。使其成为一个数组

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

如果 this.props.data 是对象的对象，则将其转换为对象数组。

于 2019-01-31T10:26:42.460 回答