Каким способом можно применить метод масивов map если response обьект?

Question

[diwlumoprif]

Делаю запрос к серверу

И получаю вот такой ответ от сервера(получаю обьект):

response сервера

{"data": [
    {
      "id":20, 
      "title":"people",
      "created_at":"2020-01-15 05:30:10",
      "updated_at":"2020-01-15 05:30:10"
    }
  ]
}

И я вывожу ответ в виде таблицы:

export default ({dataAttribute}) => (
  <table className="table">
    <thead>
      <tr>
        <th></th>
        <th>id</th>
        <th>title</th>
        <th>created_at</th>
        <th>updated_at</th>
      </tr>
    </thead>
    <tbody>
      {dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id}</td>
          <td>{item.title}</td>
          <td>{item.created_at}</td>
          <td>{item.updated_at}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

И тогда у меня ошибка:
TypeError: Cannot read property 'map' of undefined
Потому что метод map можно применить только к массиву а у меня response - обьект.

И я попробовал изменить вот это:
{dataAttribute.map(item => (
На вот это:
{Object.keys(dataAttribute).map(item => (

Но все равно не могу вывести на страничку свои данные в виде таблицы, потому что ошибка.
Warning: Each child in a list should have a unique "key" prop.
Страничка есть, заголовки есть, но нет данных под заголовками:
вот так:

Что мне исправить в коде чтобы это реализовать?

Comments

[microbo]

А зачем?

[0xD34F]

dataAtribute ={this.state.data}

({dataAttribute}) => (

Пересчитайте буквы "t".

[diwlumoprif]

0xD34F, спасибо)
Но все равно не могу вывести на страничку свои данные в виде таблицы, потому что ошибка.
Warning: Each child in a list should have a unique "key" prop.
Страничка есть, заголовки есть, но нет данных под заголовками:
вот так:

[0xD34F]

diwlumoprif, смотрите внимательнее, что пытаетесь передавать в компонент Table. Или, что вы помещаете в стейт App при получении ответа.

Answer 1

[Дмитрий]

скорее всего dataAttribute в какие-то моменты таки null или не определен. Либо разбираться, почему - например, в момент маунта данные ещё не подгрузились, либо Object.keys(dataAttribute || {})..., if (dataAttribute) Object.keys(dataAttribute)...