Получить данные о книгах и их авторах. Вывести данные пагинированным списком по 10 книг на странице в формате: <название книги> - <автор> api: [link] спецификация: [link] если не открывается swagger, в корне sber-c55-books-mock-1.0.1-oas3.1-resolved.yaml const PAGE_SIZE = 10; export default function App() { const [books, setBooks] = useState([]) const [page, setPage] = useState(1); const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true); fetch('[link] .then((res) => res.json()) .then((data) => setBooks(data)); .finally(() = setLoading(false)) }) const totalPage = Math.ceil(books.length / PAGE_SIZE) const currentBooks = books.slice(start, start + PAGE_SIZE) return ( <div className="App"> {loading && <p>Загрузка...</p>} <ul> currentBooks.map((book) => { <li> </li> }) </ul> </div> ); } Исправить ошибки и реализовать вывод пагинированного списка книг с авторами.

В вашем коде есть несколько ошибок и недочётов:

1. В useEffect отсутствует массив зависимостей, из-за чего запрос будет выполняться на каждом рендере.
2. В finally синтаксическая ошибка: () = вместо () =>.
3. Не определена переменная start для среза массива.
4. В JSX внутри map отсутствует return и ключ key.

Исправленный и улучшенный вариант:

import React, { useState, useEffect } from 'react';

const PAGE_SIZE = 10;

export default function App() {
  const [books, setBooks] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch('[link]')
      .then((res) => res.json())
      .then((data) => setBooks(data))
      .finally(() => setLoading(false));
  }, []); // пустой массив зависимостей — запрос один раз при монтировании

  const totalPage = Math.ceil(books.length / PAGE_SIZE);
  const start = (page - 1) * PAGE_SIZE;
  const currentBooks = books.slice(start, start + PAGE_SIZE);

  return (
    <div className="App">
      {loading && <p>Загрузка...</p>}
      <ul>
        {currentBooks.map((book) => (
          <li key={book.id}>
            {book.title} - {book.author}
          </li>
        ))}
      </ul>
      <div>
        <button disabled={page <= 1} onClick={() => setPage(page - 1)}>
          Назад
        </button>
        <span> Страница {page} из {totalPage} </span>
        <button disabled={page >= totalPage} onClick={() => setPage(page + 1)}>
          Вперёд
        </button>
      </div>
    </div>
  );
}

Обратите внимание, что:

• Добавлены кнопки для переключения страниц.
• Используется key в списке.
• Исправлен синтаксис finally.
• Добавлен массив зависимостей в useEffect.

Это позволит корректно загружать данные, отображать их постранично по 10 книг и переключать страницы.