React Strict Mode开发引发问题：Skip组件跳转两次如何解决？

关闭Strict Mode算不算不良开发实践？ #

不算绝对的不良实践，但不建议直接作为最终解决方案。Strict Mode的核心作用是提前暴露代码里的潜在问题（比如过时闭包、重复执行的副作用、不安全的生命周期等），帮你在开发阶段修复这些问题，避免它们在生产环境引发更隐蔽的bug。你遇到的跳转两次的问题，本质上是Strict Mode帮你发现了代码里的逻辑漏洞，而非Strict Mode本身的问题。

你的代码问题出在哪？ #

1. useEffect依赖数组不完整：你的useEffect回调里用到了nav.isNextClicked和nav.isBackClicked，但依赖数组是空的[]，这违反了React的规则——useEffect的依赖数组必须包含所有回调内用到的外部变量，否则会导致闭包过时，读取到旧的状态值。
2. 状态未重置：调用nextPage()或prevPage()后，没有重置isNextClicked/isBackClicked的状态，加上Strict Mode会刻意重复执行useEffect回调，导致两次触发页面跳转。

修复方案 #

步骤1：完善Zustand Store的状态逻辑 #

确保调用页面跳转方法后，重置触发标记：

// 假设你的Zustand Store定义如下
const useNavStore = create((set) => ({
  isNextClicked: false,
  isBackClicked: false,
  currentPage: 1,
  // 跳转后重置触发状态
  nextPage: () => set(state => ({
    currentPage: state.currentPage + 1,
    isNextClicked: false
  })),
  prevPage: () => set(state => ({
    currentPage: state.currentPage - 1,
    isBackClicked: false
  })),
  // 设置触发标记的方法
  setNextClicked: () => set({ isNextClicked: true }),
  setBackClicked: () => set({ isBackClicked: true })
}));

步骤2：修复Skip组件的useEffect依赖 #

把用到的状态和方法加入依赖数组，确保回调能响应状态变化：

const Skip = () => {
  const { isNextClicked, isBackClicked, nextPage, prevPage } = useNavStore();

  useEffect(() => {
    if (isNextClicked) {
      nextPage();
    }
    if (isBackClicked) {
      prevPage();
    }
  }, [isNextClicked, isBackClicked, nextPage, prevPage]); // 补充完整依赖

  return <div></div>;
};

export default Skip;

这样修改后，Strict Mode下即使useEffect执行两次，第二次触发时isNextClicked/isBackClicked已经被重置为false，不会重复调用跳转方法，页面只会跳转一次。同时代码也符合React的规范，避免了后续可能出现的隐蔽bug。

总结 #

如果只是临时关闭Strict Mode来验证问题，完全没问题，但最终上线前建议重新开启。Strict Mode带来的排查成本，远小于生产环境出现类似问题后的调试成本。

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