Блог

Я нашел эту кодовую базу из учебника. Я пытаюсь извлечь данные из разбитого на страницы API.

Дело в том, что, похоже, здесь не используется react-router .

  const [hits, setHits] = useState([]);
     const [pageCount, setPageCount] = useState(1); #New
    const [isLoaded, setisLoaded] = useState(false);
    const [currentPage, setcurrentPage] = useState(0); #New
    const [query, setQuery] = useState('startups'); 

    const URL = `https://hn.algolia.com/api/v1/search?query=${query}amp;page=${currentPage}`;

    const handleFetch = () => {
        fetch(URL)
            .then(response => response.json())
            .then(body => {
                setData([...body.hits]);
                                setPageCount(body.nbPages); #New
                                setisLoaded(true); #New
            })
            .catch(error => console.error('Error', error));
    };

      #New
    const handlePageChange = (selectedObject) => {
        setcurrentPage(selectedObject.selected);
        handleFetch();
    };

return (
    <div>
         <label>Search</label>
        <input type="text" onChange={(event) => setQuery(event.target.value)} />
        <button onClick={handleFetch}>Get Data</button>

            {isLoaded ? (
                hits.map((item) => {
                    return (
                        <NewsCard
                            url={item.url}
                            title={item.title}
                            author={item.author}
                            key={item.objectID}
                        />
                    );
                })
            ) : (
                <div></div>
            )}    
                       #New
            {isLoaded ? (
                <ReactPaginate
                    pageCount={pageCount}
                    pageRange={2}
                    marginPagesDisplayed={2}
                    onPageChange={handlePageChange}
                    containerClassName={'container'}
                    previousLinkClassName={'page'}
                    breakClassName={'page'}
                    nextLinkClassName={'page'}
                    pageClassName={'page'}
                    disabledClassNae={'disabled'}
                    activeClassName={'active'}
                />
            ) : (
                <div>Nothing to display</div>
            )} 

    </div>
);
  
}
 

Как можно использовать currentPage и Query в маршрутизаторе react в качестве параметров запроса, чтобы currentPage по умолчанию был равен 1, если в URL-адресе нет запроса или параметра currentPage, а также всякий раз, когда вы изменяете запрос или URL-адрес currentPage, также будут обновляться параметры запроса ‘?’, такие как https://example.com?currentPage=9amp;query=startup

Вы можете использовать историю для отправки параметров запроса в URL,

 history.push(`/?currentPage=${currentPage}amp;query=${queryString}`)
 

проверьте этот репозиторий, чтобы узнать больше об истории