React 18下Redux无法重新渲染组件问题求助

嘿，我之前在Next.js + React 18的项目里也碰到过类似的坑，咱们来一步步拆解问题：

先搞懂React 18严格模式的双重执行逻辑 #

React 18的严格模式在开发环境下会刻意触发两次组件挂载、两次useEffect执行，这是官方用来帮你检测潜在副作用泄漏的机制——比如有没有忘记清理定时器、事件监听之类的。你看到userState === "loading"时触发两次，其实是开发环境的预期行为，生产环境打包后就不会出现这个情况了。

但你说状态更新到authenticated或unauthenticated时useEffect完全不触发，这大概率是状态更新的逻辑出了问题，咱们从这几个方向排查：

1. 确认Redux的userState真的发生了变化 #

先给useSelector加个日志，或者打开Redux DevTools监控状态变化：

const userState = useSelector(state => {
  console.log("当前userState:", state.user.state);
  return state.user.state;
});

如果状态从loading切换到其他值时，控制台没有输出新状态，那问题出在Redux的action或reducer里：

• 检查是否正确dispatch了改变认证状态的action；
• 检查reducer里是否正确处理了对应的action类型，有没有返回新的state对象（Redux要求reducer必须是纯函数，不能直接修改原state）。

2. 确保useEffect的依赖数组配置正确 #

你的依赖数组[userState]看起来没问题，但如果state.user.state是引用类型（比如对象），可能会出现“值变了但引用没变”的情况，但你这里是字符串类型，这个可能性很低。可以尝试换一种写法验证：

const user = useSelector(state => state.user);
useEffect(() => {
  switch(user.state) {
    case "authenticated":
      doSomething();
      break;
    case "unauthenticated":
      doSomething();
      break;
    case "loading":
      doSomething();
      break;
  }
}, [user]);

3. 检查doSomething函数的稳定性 #

如果doSomething是在组件内部定义的函数，每次组件渲染都会重新创建一个新的函数实例。虽然你的useEffect依赖是userState，不会直接受影响，但如果doSomething内部依赖了其他状态，建议用useCallback包裹它，避免不必要的重新执行：

const doSomething = useCallback(() => {
  // 你的业务逻辑
}, [/* doSomething依赖的其他状态变量 */]);

临时处理开发环境的双重执行 #

如果只是想让开发环境下loading状态的逻辑只执行一次，可以用useRef标记执行状态：

const hasLoadingRun = useRef(false);
useEffect(() => {
  switch(userState) {
    case "authenticated":
      doSomething();
      break;
    case "unauthenticated":
      doSomething();
      break;
    case "loading":
      if (!hasLoadingRun.current) {
        doSomething();
        hasLoadingRun.current = true;
      }
      break;
  }
}, [userState]);

注意：生产环境下严格模式的双重执行会自动消失，所以不用在生产代码里保留这个ref判断。

内容的提问来源于stack exchange，提问作者Arash Jahan Bakhshan