Ответ, который вы получаете от вашего сервера, показывает, что вы получаете не массив, а вместо этого 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));
}, []);