React函数组件如何通过useState设置currentPage值实现页码重置？

错误原因 #

• 你声明的每个useState对应独立的状态，每个状态的更新函数仅能接收一个参数（即该状态的新值），你给setcurrentGroup传入两个参数的写法本身是无效的，也没有调用currentPage对应的更新函数，自然无法修改currentPage的值，也达不到同时修改两个状态的需求。
• 你代码里的currentGroup对应教程类组件的selectedGenre状态，切换分类时你需要分别调用两个状态的更新方法完成赋值。

修正后的代码 #

import { useState } from 'react';

function Movies() {
  const initialMovies = getMovies();
  // 补全和教程一致的_id字段，避免后续逻辑报错
  const initialGenres = [ {_id: "", name:"All Genres"} , ...getGenres()];
  const [movies, setMovies] = useState(initialMovies);
  const [genres, setGenres] = useState(initialGenres);
  const [pageSize, setPageSize] = useState(4);
  // 小提示：更新函数建议按大驼峰命名更符合规范：setCurrentPage
  const [currentPage, setcurrentPage] = useState(1);
  const [currentGroup, setcurrentGroup] = useState();

  const handleGenreSelect = (genre) => {
    // 分别更新两个状态即可
    setcurrentGroup(genre);
    setcurrentPage(1);
  };
  // 后续其他逻辑...
}

额外说明 #

如果你的getMovies、getGenres是异步请求方法，不要直接把请求结果作为useState初始值，需要放到useEffect中调用，对应类组件的componentDidMount生命周期逻辑，写法如下：

useEffect(() => {
  const genres = [{ _id: "", name: "All Genres" }, ...getGenres()];
  setMovies(getMovies());
  setGenres(genres);
}, []);

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