/
d.vader
/
e2e
Обзор
Документация
Войти
/
d.vader
/
e2e
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/SearchBox.tsx
71 строка
2 KB
Boris Meshcheryakov
initial commit
01 окт 2025, 09:22
01 окт 2025, 09:22
3edac10
Код
Авторство
О чём код?
import { ChangeEvent, useEffect, useState } from "react"; import { useDebounce } from "../hooks/useDebounce"; export const SearchBox = () => { const [query, setQuery] = useState<string | null>(null); const [debouncedquery, setDQuery] = useState<string | null>(null); const [state, setS] = useState([]); const [isNext, setNext] = useState(false); const [page, setPage] = useState(0); let timeout = 0; const handleChange = (e: ChangeEvent<HTMLInputElement>) => { setQuery(e.target.value); }; useDebounce(() => setDQuery(query), query); useEffect(() => { if (query !== null) { fetch(`https://rickandmortyapi.com/api/character/?page=${page}`) // fetch(`http://localhost:5005/api/posts?page=${page}`) .then((res) => res.json()) .then((data) => { console.log("data>>>", data); setS(data.results); setNext(data.info); }); } }, [debouncedquery, page]); // useEffect(() => { // setTimeout(() => { // console.log("ЗАПРОС к АПИ", query); // }, 1000); // }, [query]); console.log({ state }); const res = () => { // return } return ( <div> <input type="text" className="p-4 border-2 rounded" onChange={handleChange} /> <p>input data : {query}</p> {state.map((e, i) => ( <div key={e.id}> {e.name} <img src={e.image} alt={`rickAndMorty-${e.name}`} /> </div> ))} {isNext && <button onClick={() => setPage((s) => s + 1)}> Next</button>} {/* отдельный компонент пагинации */} <div>1, 2, 3 ... 42 </div> </div> ); };