React中useEffect结合popstate事件监听无法设置状态的问题

问题原因 #

1. 闭包陷阱：你的useEffect依赖为空数组，意味着handlePopState是在组件首次渲染时创建的，它只能捕获到当时someState的初始值（比如undefined）。即便之后状态更新，这个旧的事件回调里的someState引用依然是初始值。
2. setState的异步性：在handlePopState中直接打印someState时，由于React的状态更新是异步的，此时状态还未完成更新，所以打印的仍是闭包捕获的旧值。

解决方案 #

1. 使用函数式更新状态（获取更新前的状态）

如果需要在设置状态时基于之前的状态值操作，或者想查看更新前的状态，用函数式更新的方式：

useEffect(() => {
  const handlePopState = () => {
    // 函数式更新，prevState是当前最新的状态值
    setSomeState(prevState => {
      console.log('更新前的状态:', prevState);
      return "test value";
    });
  };

  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

2. 用useRef同步状态，访问最新值

如果需要在popstate回调中立刻获取最新的状态（注意：setState异步更新后的值需要等下一次渲染才能拿到），可以用useRef同步状态：

import { useState, useEffect, useRef } from 'react';

// ...

const [someState, setSomeState] = useState();
const someStateRef = useRef(someState);

// 同步状态到ref，确保ref始终持有最新状态
useEffect(() => {
  someStateRef.current = someState;
}, [someState]);

useEffect(() => {
  const handlePopState = () => {
    setSomeState("test value");
    // 通过ref访问当前最新的状态（更新前的值）
    console.log('当前状态:', someStateRef.current);
  };

  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

3. 监听状态变化执行后续操作

不要在popstate回调中直接依赖状态做操作，而是单独用useEffect监听状态变化，确保拿到最新的状态值：

import { useState, useEffect } from 'react';

// ...

const [someState, setSomeState] = useState();

useEffect(() => {
  const handlePopState = () => {
    setSomeState("test value");
  };

  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

// 监听状态变化，执行后退/前进后的操作
useEffect(() => {
  if (someState === "test value") {
    console.log('状态已更新:', someState);
    // 在这里编写你需要执行的逻辑
  }
}, [someState]);

4. 确保回调能获取最新依赖（可选）

如果你的handlePopState依赖其他变量，用useCallback包裹回调，并添加到useEffect的依赖中，确保每次依赖变化时重新绑定事件：

import { useState, useEffect, useCallback } from 'react';

// ...

const [someState, setSomeState] = useState();

const handlePopState = useCallback(() => {
  setSomeState("test value");
}, []); // 这里添加回调依赖的变量，比如其他状态或props

useEffect(() => {
  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, [handlePopState]);

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