Middle

Pobierz dane o książkach i ich autorach. Wyświetl dane w formie paginowanej listy po 10 książek na stronie w formacie: <tytuł książki> - <autor> api: [link] specyfikacja: [link] jeśli swagger się nie otwiera, w katalogu głównym 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); setLoading(false); }) .catch(() => setLoading(false)); }, [page]); 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>Ładowanie...</p>} <ul> {currentBooks.map((book, index) => ( <li key={index}>{book.title} - {book.author}</li> ))} </ul> <div> <button disabled={page === 1} onClick={() => setPage(page - 1)}> Wstecz </button> <button disabled={page === totalPage} onClick={() => setPage(page + 1)}> Dalej </button> </div> </div> ); } Popraw błędy i zaimplementuj paginowane wyświetlanie listy książek z autorami.

sobes.tech AI

Odpowiedź od AI

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

В useEffect отсутствует массив зависимостей, из-за чего запрос будет выполняться на каждом рендере.
В finally синтаксическая ошибка: () = вместо () =>.
Не определена переменная start для среза массива.
В 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 книг и переключать страницы.

Poprzednia Dalej