React自定义导航返回需双击问题排查与解决方案-js教程-PHP中文网

React自定义导航返回需双击问题排查与解决方案

霞舞

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

原创

555人浏览过

react自定义导航返回需双击问题排查与解决方案

正如摘要所述，本文旨在解决React应用中使用自定义导航时，需要双击返回按钮才能正确返回上一页的问题。以下将深入分析问题原因并提供解决方案。

问题分析

提供的代码片段展示了一个自定义的React Hook useMyHook，用于管理应用的状态，并将其同步到浏览器的URL和localStorage中，以实现导航功能。问题在于，在点击浏览器的返回按钮时，第一次点击无法正确更新状态和URL，需要点击两次才能返回到上一个状态。

可能的原因是React的严格模式（StrictMode）在开发环境下对组件进行双重渲染。这意味着useEffect中的代码会被执行两次，导致状态更新和URL修改出现异常。

解决方案

针对上述问题，可以采取以下几种解决方案：

移除严格模式：

这是最直接的解决方案，但并不推荐。虽然可以解决问题，但会失去严格模式提供的代码检查和潜在问题提示功能。移除index.js或者根组件 <App> 上的 <React.StrictMode> 标签。

优化useEffect依赖项：

确保useEffect的依赖项列表只包含真正需要监听的变量。避免不必要的重复执行。

在提供的代码中，useEffect依赖于initialLoad和key。initialLoad的目的是只在组件第一次加载时从localStorage中读取数据。但是，由于严格模式的双重渲染，initialLoad会被设置为false两次，导致localStorage的数据被覆盖。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

可以将从localStorage中读取数据的逻辑放到useState的初始值中，避免使用useEffect。

const useMyHook = (key) => {
  const storedFilters = JSON.parse(localStorage.getItem(key));
  const initialSt1 = storedFilters ? storedFilters.st1 : null;
  const initialSt2 = storedFilters ? storedFilters.st2 : null;

  const [st1, setSt1] = useState(initialSt1);
  const [st2, setSt2] = useState(initialSt2);

  useEffect(() => {
    const updateQueryParams = () => {
      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]);

  useEffect(() => {

    const handlePopState = () => {
      const queryParams = new URLSearchParams(window.location.search);
      setSt1(queryParams.get('state1') ? parseInt(queryParams.get('state1')) : null);
      setSt2(queryParams.get('state2') ? parseInt(queryParams.get('state2')) : null);
    };

    window.addEventListener('popstate', handlePopState);

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

  return { st1, setSt1, st2, setSt2 };
};

登录后复制

使用useRef避免重复执行：

如果必须使用useEffect，可以使用useRef来存储一个标志，用于判断useEffect是否已经执行过。

const useMyHook = (key) => {
  const [st1, setSt1] = useState(null);
  const [st2, setSt2] = useState(null);
  const initialLoad = useRef(true);

  useEffect(() => {
    if (initialLoad.current) {
      const storedFilters = JSON.parse(localStorage.getItem(key));
      if (storedFilters) {
        setSt1(storedFilters.st1);
        setSt2(storedFilters.st2);
      }
      initialLoad.current = false;
    }
  }, [key]);

  // ... 其他 useEffect
};

登录后复制

防抖或节流状态更新：

如果状态更新过于频繁，可以考虑使用防抖或节流函数来限制更新的频率。这可以避免由于快速连续的状态更新导致的问题。
```
import { debounce } from 'lodash'; // 需要安装 lodash

const debouncedSetSt1 = debounce(setSt1, 200); // 延迟200ms执行

// ... 在需要更新 st1 的地方使用 debouncedSetSt1
```
登录后复制

注意事项

在生产环境中，严格模式不会双重渲染组件，因此该问题可能只会在开发环境中出现。
确保localStorage的key是唯一的，避免不同组件之间的数据冲突。
在更新URL时，可以使用window.history.replaceState代替window.history.pushState，以避免在历史记录中添加重复的条目。