React设置默认值时useEffect未触发问题求助

问题原因 #

你的useEffect依赖的是page状态，初始时page已经是1。第一次调用refresh执行setPage(1)时，page的值并没有发生改变（还是1），React会跳过这次状态更新，自然也不会触发依赖page的useEffect。而第二次调用refresh时，page大概率已经被改成了其他值（比如2），这时候setPage(1)让page从其他值变回1，依赖项发生变化，useEffect就会正常触发。

解决办法 #

给你几个可行的方案：

• 方案一：直接在refresh里调用目标函数
  既然刷新就是要重置状态并重新获取数据，没必要绕useEffect，直接在refresh里执行对应逻辑：

  const refresh = () => {
    setTemp([]);
    setPage(1);
    setGoal();
    getData();
  };
  

  这种方式最直接，逻辑清晰，也不会受状态值是否变化的影响。

• 方案二：新增刷新标识作为依赖
  加一个专门的刷新计数器，每次调用refresh就让计数器加1，把它加入useEffect的依赖数组：

  const [goal, setGoal] = useState();
  const [page, setPage] = useState(1);
  const [temp, setTemp] = useState([]);
  const [refreshCount, setRefreshCount] = useState(0);
  
  useEffect(() => {
    setGoal();
    getData();
  }, [page, refreshCount]);
  
  const refresh = () => {
    setTemp([]);
    setPage(1);
    setRefreshCount(prev => prev + 1);
  };
  

  这样每次调用refresh，refreshCount都会变化，不管page是不是1，useEffect都会触发。

• 方案三：函数式更新配合逻辑（可选）
  用函数式更新确保setPage的执行逻辑更严谨，避免潜在的状态更新问题，不过本质上还是要配合前面的方案才能解决当前触发问题：

  const refresh = () => {
    setTemp([]);
    setPage(() => 1);
  };
  

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