Блог

То, что я пытаюсь сделать, это извлечь данные из API и отобразить их в таблице, используя библиотеку material-table . Я считаю, что это мне не удается правильно манипулировать объектами и массивами.

Мой api возвращает этот ответ:

 {
  "data": [
    {
      "id": 7,
      "field01": 1,
      "field02": 1,
      "field03": false,
      "people": {
        "id": 1,
        "name": "John"
      },
       "id": 8,
       "field01": 2,
       "field02": 2,
       "field03": false,
       "people": {
         "id": 2
         "name": "Mattew"
      },
    },
  ]
}
 

Код, который я использую для извлечения данных из api :

 const [data, setData] = useState([]);

  const getValues = async () => {
    await api.get("/myrequest")
      .then(response => {
        setData(response.data.data);

      }).catch(error => {
        console.log(error);
      })
  }
 

Таблица, которую я создал с помощью material-table :

 <MaterialTable
            columns={[
              { title: 'Field 01', field: 'field01' },
              { title: 'Field 02', field: 'field02' },
              { title: 'Field 03', field: 'field03' },
              { title: 'Field 04',field: 'people.name' },
            ]}
            data={data}
            title="My table"
          />
 

Просматривая документацию, я заметил следующее: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {id, name}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Я считаю, что ошибка связана с тем, что мой api возвращает массив, а таблица не распознается.

Но я до сих пор не смог этого сделать. И то, как я это сделал, возвращает следующую ошибку: Сбой типа реквизита: недопустимый реквизит data , предоставленный MaterialTable

Что ж, используемый вами пакет, похоже, не способен обрабатывать вложенные объекты, поэтому у вас есть два варианта:

• рассмотрите возможность использования другого пакета, например, react-table

https://github.com/tannerlinsley/react-table

• создайте адаптер, чтобы иметь массив с плоскими объектами

 const adapter = data => data.map(item => (
    {
        id: item.id,
        field01: item.field01,
        field02: item.field02,
        field03: item.field03,
        name: item.people.name,
    }
));
 

Тогда в вашем компоненте

 <MaterialTable
    columns={[
        { title: 'Field 01', field: 'field01' },
        { title: 'Field 02', field: 'field02' },
        { title: 'Field 03', field: 'field03' },
        { title: 'Field 04',field: 'name' },
    ]}
    data={adapter(data)}
    title="My table"
/>
 

Примечание:

Вы должны использовать это поле для доступа к своим данным

 response.data.data
 

Поскольку, как вы написали, response.data имеет дополнительное поле data , содержащее ваш массив объектов.