Material UI Pagination点击分页内容不更新问题求助

1. 修复Material UI Pagination的页码传递逻辑 #

在AppPagination.js中，Material UI的Pagination组件onChange回调的参数用法错误。官方API规定，onChange的第二个参数才是选中的页码值，而非通过e.target.textContent获取，修改如下：

// AppPagination.js
import React from "react";
import { Pagination } from "@mui/material";

const AppPagination = ({setPage,pageNumber}) => {
    const handleChange = (newPage)=> {
        setPage(newPage)
        window.scroll(0,0)
        console.log(newPage)
    }
  return (
    <div >
        <div >
            <Pagination
            onChange={(e, value) => handleChange(value)} // 改用第二个参数value获取页码
            variant="outlined"
            count={pageNumber}/>
        </div>
    </div>
  )
}

export default AppPagination;

2. 修正elementFood的作用域问题 #

在MealNew.js中，elementFood被定义在fetch回调内部，导致渲染时无法获取最新数据。直接在渲染阶段使用data状态生成列表即可：

// MealNew.js 中return部分修改
return (
    <Card className="meal">
        <form onSubmit={handleSubmit}>
            <input 
                className="search"
                placeholder="Search..."
                value={query}
                onChange={(e)=>setQuery(e.target.value)}/>
            <input type='submit' value='Search'/>
        </form>
      
        <li className="meal">
            <div className='meal-text'>
                {/* 直接用data.map生成列表，删除原elementFood变量 */}
                {showData && data.map((meal, key) => (
                    <div key={key}>
                        <h1>{meal.title}</h1>
                        <img src={meal.image} alt='e-meal'/>
                    </div>
                ))}
                <AppPagination
                    setPage={setPage}
                    pageNumber={numberOfPages}  
                />
            </div>
        </li>
    </Card>
)

同时简化handleClick函数，删除内部的elementFood定义：

const handleClick = () => {
    setShowData(true);
    const link = `https://api.spoonacular.com/recipes/complexSearch?query=${query}&apiKey=XYZABC&page=${page}`;
    fetch(link)
    .then((response)=> response.json())
    .then((data) => {
        setData(data.results)
        setNumberOfPages(data.total_pages)
    })
}

3. 解决useEffect的依赖警告 #

用useCallback包裹handleClick，明确其依赖项，再更新useEffect的依赖数组：

首先导入useCallback：

import React, {useEffect, useState, useCallback } from "react";

包裹handleClick：

const handleClick = useCallback(() => {
    setShowData(true);
    const link = `https://api.spoonacular.com/recipes/complexSearch?query=${query}&apiKey=XYZABC&page=${page}`;
    fetch(link)
    .then((response)=> response.json())
    .then((data) => {
        setData(data.results)
        setNumberOfPages(data.total_pages)
    })
}, [query, page]) // 依赖query和page，值变化时重新生成函数

更新useEffect：

useEffect(()=> {
    handleClick();
},[handleClick]) // 依赖包裹后的handleClick

另外建议将初始page值设为1（符合常规分页逻辑）：

const[page,setPage] = useState(1);

4. 额外优化：搜索时重置页码 #

用户提交新搜索时，自动重置页码为1，避免在新结果中停留在旧页码：

const handleSubmit = (e) => {
    e.preventDefault();
    setPage(1); // 重置页码
    handleClick();
}

完成以上修改后，分页点击即可正确切换内容，同时解决React Hook的依赖警告问题。

内容的提问来源于stack exchange，提问作者senix