React中使用useState更新pageAnime值的分页点击问题求助

问题分析 #

你的代码已经定义了pageAnime状态和依赖它的请求逻辑，但缺少触发分页状态更新的交互处理逻辑，这是点击分页无响应的核心原因。同时还需要排查分页事件绑定、路径切换时的页码重置等潜在问题。

具体修复步骤 #

1. 添加分页点击处理函数
   在组件内新增用于更新pageAnime状态的函数，响应分页按钮的点击操作：

function DetailAnime() {
  const [detailAnime, setDetailAnime] = useState([]);
  const [pageAnime, setPageAnime] = useState(1);

  const { id } = useParams([]);
  const { pathname } = useLocation();

  // 新增分页切换处理函数
  const handlePageChange = (newPage) => {
    // 限制页码最小值（可根据API实际规则调整）
    if (newPage >= 1) {
      setPageAnime(newPage);
    }
  };

  // 原请求逻辑保持不变
  useEffect(() => {
    if(pathname.split('/').includes('popular')){
        getAnimePopular(pageAnime).then((res) => {
            setDetailAnime(res)
        })
    } else {
        getAnimeList(pageAnime).then((res) => {
            setDetailAnime(res)
            console.log(res)
        }); 
    } 
  }, [pathname, pageAnime]);

  // ... 其他组件渲染逻辑
}

2. 绑定分页组件的点击事件
   在组件JSX区域，给分页按钮（或分页器组件）绑定上述处理函数。以基础上下页按钮为例：

// 渲染分页控制区域
<div className="pagination">
  <button 
    onClick={() => handlePageChange(pageAnime - 1)} 
    disabled={pageAnime === 1}
  >
    上一页
  </button>
  <span>当前页：{pageAnime}</span>
  <button onClick={() => handlePageChange(pageAnime + 1)}>
    下一页
  </button>
</div>

3. 优化路径切换时的页码重置（可选）
   当页面路径在popular列表和普通列表间切换时，建议自动重置页码为1，避免路径切换后停留在原页码的不合理情况：

// 路径变化时重置页码
useEffect(() => {
  setPageAnime(1);
}, [pathname]);

// 原请求逻辑的useEffect保持不变
useEffect(() => {
  if(pathname.split('/').includes('popular')){
      getAnimePopular(pageAnime).then((res) => {
          setDetailAnime(res)
      })
  } else {
      getAnimeList(pageAnime).then((res) => {
          setDetailAnime(res)
          console.log(res)
      }); 
  } 
}, [pathname, pageAnime]);

4. 确认API函数的正确性
   确保getAnimePopular函数和getAnimeList逻辑一致，正确接收page参数并发起请求：

export const getAnimePopular = async (page) => {
  const anime = await axios.get(`${apiUrl}/top/anime?page=${page}`); // 路径需匹配实际API规则
  return anime.data.data;
};

验证要点 #

• 点击分页按钮时，检查控制台是否有pageAnime状态的更新日志
• 状态更新后，确认useEffect是否触发了对应的API请求
• 查看网络请求URL，确认page参数是否正确传递

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