Question

你好我们正试图从我的api显示我的数据这是我的Json回复：

 {
    "id": 1,
    "name": "Chicken Wings",
    "product_category": {
        "name": "Starter"
    },
    "short_description": "Delicious Chicken Wings",
    "image": "http://127.0.0.1:8000/api/meal_images/telechargement.jpeg",
    "price": 10
},
{

这是我对表的反应组件：

  <BootstrapTable data={this.state.todos} striped hover>
        <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000 } }>Name</TableHeaderColumn>
        <TableHeaderColumn dataField='product_category' filter={ { type: 'TextFilter', delay: 1000 } }>Category</TableHeaderColumn>
        <TableHeaderColumn dataField='image'> Image </TableHeaderColumn>
        <TableHeaderColumn dataField='price'> Price </TableHeaderColumn>
      </BootstrapTable>

但对于显示我'{object} {object}的'product_category'，我尝试显示product_category的名称，我尝试使用dataField ='product_category.name'但是不能正常工作如何访问我的product_category表的名称？谢谢

Answer 1

您可以将dataFormat属性用于单个TableHeaderColumn来格式化单元格中的特定数据。您有产品类别单元格类型Object的数据，因此此单元格的正确数据格式为：dataFormat={ (cell) => cell.name }。

以下是整个表组件的外观：

<BootstrapTable data={this.state.todos} striped hover>
    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000 } }>Name</TableHeaderColumn>
    <TableHeaderColumn dataField='product_category' dataFormat={ (cell) => cell.name } filter={ { type: 'TextFilter', delay: 1000 } }>Category</TableHeaderColumn>
    <TableHeaderColumn dataField='image'> Image </TableHeaderColumn>
    <TableHeaderColumn dataField='price'> Price </TableHeaderColumn>
  </BootstrapTable>

在React bootstrap表上获取并显示数据

1 个答案: