Попытка вернуть объекты, похожие на отображение - PullRequest
0 голосов
/ 05 мая 2020

Я пытаюсь вернуть список объектов для последующего отображения в ag-сетке. однако я изначально пытался сопоставить, но заметил, что это не массив, он только заключен в {} и, следовательно, получал ошибку не функции. Любые советы будут чрезвычайно признательны или ссылки на соответствующие ресурсы, поскольку я не смог найти ничего, что помогло бы мне

API возвращает {"author": "jk rowling", "title": "Гарри Поттер", «id»: «1», «pages»: «1000»}

  useEffect(() => {
        fetch(http://fakeapi.com/)
            .then(res => res.json())
            .then(json => json.map(res => {
                return {
                    author: res.author,
                    title: res.title,
                    id: res.id,
                    pages: res.pages,
                };
            })
            ).then(res => setRowData(res));
    }, []);

1 Ответ

0 голосов
/ 05 мая 2020

Ответ, который вы получаете от вашего сервера, показывает, что вы получаете не массив, а вместо этого 1 исполнителя. Вам нужно, чтобы ваш сервер возвращал массив информации о книгах. Итак, ваш ответ JSON будет выглядеть следующим образом:

[
    {
      "id":"1",
      "author": "j.k rowling",
      "title": "Harry Potter",
      "pages":"7000"
    },
    {
      "id":"2",
      "author": "a.k sayomh",
      "title": "Singer role",
      "pages":"10000"
    },
    //...
]

Затем в своей ag-сетке вы можете использовать функцию .map, как вы это делали.

Если вы не получаете массив информации о книгах, то этот API не предназначен для вашего варианта использования.

Допустим, API возвращает объект, если общий объем данных равен 1 и массив если больше. Тогда что бы ты мог сделать.

useEffect(() => {
  fetch(http://fakeapi.com/)
      .then(res => res.json())
      .then(json => Array.isArray(json)
        ? json.map(res => ({
            author: res.author,
            title: res.title,
            id: res.id,
            pages: res.pages,
          ))
        : [json]
      ).then(res => setRowData(res));
}, []);
...