Middle

Кітаптар мен олардың авторлары туралы деректерді алыңыз. Деректерді 10 кітаптан тұратын беттелген тізімде көрсетіңіз форматта: <кітап атауы> - <автор> api: [сілтеме] спецификация: [сілтеме] егер swagger ашылмаса, түбірінде sber-c55-books-mock-1.0.1-oas3.1-resolved.yaml const PAGE_SIZE = 10; экспорттау әдепкі функция App() { const [кітаптар, setBooks] = useState([]) const [бет, setPage] = useState(1); const [жүктелуде, setLoading] = useState(false) useEffect(() => { setLoading(true); fetch('[сілтеме]') .then((res) => res.json()) .then((деректер) => setBooks(деректер)) .finally(() => setLoading(false)); }, []); const totalPage = Math.ceil(кітаптар.length / PAGE_SIZE); const start = (бет - 1) * PAGE_SIZE; const currentBooks = кітаптар.slice(start, start + PAGE_SIZE); return ( <div className="App"> {жүктелуде && <p>Жүктелуде...</p>} <ul> {currentBooks.map((кітап) => ( <li key={кітап.id}>{кітап.title} - {кітап.author}</li> ))} </ul> {/* Беттеу басқаруын қосуға болады */} </div> ); }

sobes.tech AI

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 кітаптан бетке бөлуге және беттерді ауыстыруға мүмкіндік береді.

Алдыңғы Келесі