ReactJS 我的搜索 function 分頁的每一頁都不搜索，怎么辦？

Question

我的搜索 function 只搜索第 1 頁的產品。

    // Pagination source code ==============================================================
    const [currentPage, setCurrentPage] = useState(1)
    const [postsPerPage] = useState(6)

    const indexOfLastPost = currentPage * postsPerPage;
    const indexOfFirstPost = indexOfLastPost - postsPerPage;
    const currentPosts = moviedata.slice(indexOfFirstPost, indexOfLastPost)
    const howManyPages = Math.ceil(moviedata.length/postsPerPage)

<div className='movieslist'>
     <div className='list'>
                                    {currentPosts.filter(u=>u.title.toLocaleLowerCase().includes(query)).map((fd, i) => {
    return <Card  img={fd.img} title={fd.title} quality={fd.quality} rating={fd.rating} price={fd.price} duration={fd.duration} year={fd.year} id={fd.id} allproduct={fd} allwishlist={fd} key={i} />
})}

    </div>

    <Pagination pages = {howManyPages} setCurrentPage={setCurrentPage}/>

</div>

我想搜索所有頁面的項目，而不僅僅是一頁 **** 但它只搜索一頁上的項目

Answer 1

1)

乍一看，您似乎在過濾currentPosts

如果你想從所有頁面中搜索項目，你應該過濾moviedata而不是在過濾之前對其進行切片

2)

當然，如果您需要幫助，可能需要重建其他部分，請告訴我！

3）如何重構

如果您的過濾器經常應用，它應該可以解決您的問題

請注意someString.includes('') // always returns true如果您的查詢為空，您將獲得所有數據

    const [currentPage, setCurrentPage] = useState(1)
    const [postsPerPage] = useState(6)

    const filteredMovieData = moviedata.filter(()=>u=>u.title.toLocaleLowerCase().includes(query)) //new

    const indexOfLastPost = currentPage * postsPerPage;
    const indexOfFirstPost = indexOfLastPost - postsPerPage;
    const currentPosts = filteredMovieData.slice(indexOfFirstPost, indexOfLastPost)
    const howManyPages = Math.ceil(filteredMovieData.length/postsPerPage)