正如摘要所述，本文旨在解决React应用中使用自定义导航时，需要双击返回按钮才能正确返回上一页的问题。以下将深入分析问题原因并提供解决方案。
问题分析
提供的代码片段展示了一个自定义的React Hook useMyHook，用于管理应用的状态，并将其同步到浏览器的URL和localStorage中，以实现导航功能。问题在于，在点击浏览器的返回按钮时，第一次点击无法正确更新状态和URL，需要点击两次才能返回到上一个状态。
可能的原因是React的严格模式（StrictMode）在开发环境下对组件进行双重渲染。这意味着useEffect中的代码会被执行两次，导致状态更新和URL修改出现异常。
解决方案
针对上述问题，可以采取以下几种解决方案：
移除严格模式：
这是最直接的解决方案，但并不推荐。虽然可以解决问题，但会失去严格模式提供的代码检查和潜在问题提示功能。移除index.js或者根组件 上的 标签。
优化useEffect依赖项：
确保useEffect的依赖项列表只包含真正需要监听的变量。避免不必要的重复执行。
在提供的代码中，useEffect依赖于initialLoad和key。initialLoad的目的是只在组件第一次加载时从localStorage中读取数据。但是，由于严格模式的双重渲染，initialLoad会被设置为false两次，导致localStorage的数据被覆盖。
可以将从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'; // 需要安装 lodashconst debouncedSetSt1 = debounce(setSt1, 200); // 延迟200ms执行// ... 在需要更新 st1 的地方使用 debouncedSetSt1
注意事项
在生产环境中，严格模式不会双重渲染组件，因此该问题可能只会在开发环境中出现。确保localStorage的key是唯一的，避免不同组件之间的数据冲突。在更新URL时，可以使用window.history.replaceState代替window.history.pushState，以避免在历史记录中添加重复的条目。
总结
在使用React自定义导航时，需要注意严格模式的双重渲染可能导致的问题。通过优化useEffect的依赖项、使用useRef、防抖或节流状态更新等方式，可以有效解决双击返回按钮才能正确返回的问题，提升用户体验。 在解决问题的过程中，理解React的生命周期和严格模式的特性至关重要。
以上就是React自定义导航返回需双击问题排查与解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515821.html
微信扫一扫 
支付宝扫一扫 
