React 自定义导航返回需点击两次的解决方案-js教程-PHP中文网

React 自定义导航返回需点击两次的解决方案

DDD

发布： 2025-08-17 19:08:24

原创

709人浏览过

react 自定义导航返回需点击两次的解决方案

本文旨在解决 React 应用中使用自定义导航时，需要点击两次返回按钮才能正确返回上一页的问题。通过分析问题的根源，即 React 的 StrictMode 在开发环境下重复渲染组件，并结合官方文档的建议，提供两种解决方案：一是通过条件判断避免重复执行副作用函数，二是优化代码逻辑，减少对 useEffect 的依赖。

在 React 应用中实现自定义导航，并将状态存储在本地存储和 URL 中，是一种常见的需求。然而，开发者可能会遇到一个问题：当点击返回按钮时，第一次点击只是恢复了之前的状态，但 URL 没有改变，需要再次点击才能真正返回上一页。这通常是由于 React 的 StrictMode 在开发模式下重复渲染组件所导致的。

StrictMode 是 React 提供的一个非常有用的工具，它可以帮助开发者发现代码中的潜在问题。在开发环境下，StrictMode 会将组件渲染两次，以便检测出不纯的渲染函数、副作用等问题。虽然这在开发阶段很有帮助，但有时也会导致一些意想不到的行为，比如本文中描述的返回按钮需要点击两次的问题。

问题分析

问题的核心在于 useEffect 的执行时机。在提供的代码中，useEffect 被用来更新 URL 和本地存储，以及监听 popstate 事件来更新状态。由于 StrictMode 的存在，这些 useEffect 会被执行两次，导致状态和 URL 的不一致。

解决方案

针对这个问题，有两种主要的解决方案：

1. 条件判断避免重复执行副作用函数

可以在 useEffect 中添加条件判断，确保只有在状态真正发生变化时才执行副作用函数。例如，可以比较当前的状态和本地存储中的状态，如果相同则不执行更新操作。

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

  useEffect(() => {
    const updateQueryParams = () => {
      const storedFilters = JSON.parse(localStorage.getItem(key));
      // Add condition to check if state has changed
      if (storedFilters && storedFilters.st1 === st1 && storedFilters.st2 === st2) {
        return; // State hasn't changed, no need to update
      }

      const queryParams = new URLSearchParams();
      if (st1) queryParams.set('state1', st1);
      if (st2) queryParams.set('state2', st2);
      const queryString = queryParams.toString();
      const newUrl = `${window.location.pathname}?${queryString}`;

      window.history.pushState({ path: newUrl }, '', newUrl);
      localStorage.setItem(key, JSON.stringify({ st1, st2 }));
    };
    updateQueryParams();
  }, [st1, st2, key]);

登录后复制

通过添加这个条件判断，可以避免在 StrictMode 导致的重复渲染中执行不必要的更新操作。

2. 优化代码逻辑，减少对 useEffect 的依赖

React 官方文档建议，尽量避免使用 useEffect 来处理可以在渲染阶段完成的任务。可以考虑将状态更新的逻辑放在事件处理函数中，而不是放在 useEffect 中。

例如，可以直接在 setSt1 和 setSt2 的回调函数中更新 URL 和本地存储：

  const setSt1WithUpdate = (newValue) => {
    setSt1(newValue);
    updateUrlAndStorage(newValue, st2);
  };

  const setSt2WithUpdate = (newValue) => {
    setSt2(newValue);
    updateUrlAndStorage(st1, newValue);
  };

  const updateUrlAndStorage = (newSt1, newSt2) => {
    const queryParams = new URLSearchParams();
    if (newSt1) queryParams.set('state1', newSt1);
    if (newSt2) queryParams.set('state2', newSt2);
    const queryString = queryParams.toString();
    const newUrl = `${window.location.pathname}?${queryString}`;

    window.history.pushState({ path: newUrl }, '', newUrl);
    localStorage.setItem(key, JSON.stringify({ st1: newSt1, st2: newSt2 }));
  };

登录后复制

这样可以避免使用 useEffect 来同步状态和 URL，从而减少了 StrictMode 的影响。

注意事项