时间戳

首页 > 解决方案 > 如何将查询参数推送并用于此页面的反应？

reactjs - 如何将查询参数推送并用于此页面的反应？

问题描述

我从教程中找到了这个代码库。我正在尝试从分页 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}&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 用作查询参数，因此如果 URL 中没有任何查询或 currentPage 参数，则默认 currentPage 将为 1，并且每当您更改查询或 currentPage URL 时，URL 也将更新为“？” 查询参数如 https://example.com?currentPage=9&query=startup

标签： reactjsreact-routerreact-hooksreact-router-domreact-router-v4

解决方案

您可以使用历史记录将查询参数推送到 url，

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

查看此存储库以了解有关历史的更多信息

推荐阅读