Получать и отображать данные в Таблице начальной загрузки React

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>

, но для 'product_category 'которые отображают меня' {object} {object}, я пытаюсь отобразить имя 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>