本文旨在解决 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 的影响。
注意事项
在生产环境中，StrictMode 不会重复渲染组件，因此这个问题只会在开发环境中出现。在使用 useEffect 时，一定要仔细考虑依赖项，避免不必要的更新操作。尽量遵循 React 官方文档的建议，减少对 useEffect 的依赖，提高代码的可读性和可维护性。
总结
在 React 应用中使用自定义导航时，需要注意 StrictMode 带来的影响。通过添加条件判断或优化代码逻辑，可以有效地解决返回按钮需要点击两次的问题。同时，也应该遵循 React 官方文档的建议，编写高质量的 React 代码。
以上就是React 自定义导航返回需点击两次的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/107390.html
微信扫一扫 
支付宝扫一扫 
