问题
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
页面切换了，请求还没结束，而回调中有setState语句。
其实没什么问题，只是react框架在提醒你，既然你有这种语句，这说明你可能没有将环境处理干净。然而react中的警告以error形式显示，就很sb。
在react 18中，这种强迫症警告已经被除去。
https://github.com/reactwg/react-18/discussions/82
解决
当组件被卸载时（比如页面跳转），使用 AbortController 取消网络请求。
useEffect(() => {const controller = new AbortController(); // 创建控制器const signal = controller.signal;fetch('https://api.example.com/data', { signal }).then(res => res.json()).then(data => setData(data)).catch(err => {if (err.name === 'AbortError') {console.log('Fetch aborted'); // 捕获取消请求的错误} else {// 处理真实错误}});return () => {controller.abort(); // 组件卸载时，直接掐断请求};
}, []);
关于是否要处理的讨论
当异步任务还未结束时，组件被卸载。异步任务依然会继续执行（比如网络请求），与之相关的回调函数也会在其结束后继续执行。
这在大多数情况下其实无伤大雅。比如我主页有个卡片列表，我需要发送请求去获取这个列表，我们假设服务器相当差劲，我等的不耐烦了都切换到另一个页面（路由切换）了，他还没加载出来。
那么相应的回调会执行，比如list = res.data.list;那么由于组件已经卸载了，所以list这个响应式数据和相关的DOM元素早就没有了，这不会引发任何问题。
This is a no-op
react的提示中也有说明，实际上setXXX根本没执行，而大多数请求的回调中都只是setXxx的逻辑而已，因此react 18把这个警告去掉了。
不处理
在大多数情况下，请求的响应都非常快，比人类的反应更快。而且相应的回调也非常简单，不过是把传过来的数据赋值一下而已。
- 真正需要考虑的是另一些情况，比如回调函数中会有个全局弹窗。在切换页面后给人来个之前页面的弹窗只会让人感觉莫名其妙。
- 长时间或者吃资源的任务，会引发严重的内存泄露。
- 全局状态。（临时的响应式数据不会影响到新的页面，而全局状态则可能会，因此可能会产生bug）
this.$store.commit('updateGlobalData');
处理
没什么好说的，处理这种情况能够在一定程度上减轻心智负担，不用考虑跨页面的异步任务引发的bug。
然而，处理这种问题也会带来一部分的模板代码。
可以考虑使用react 的react query和Vueuse的useFetch，他们考虑到了这种情况，使用这些工具可以有效地降低模板代码的代码量，提高项目的意图表达效率。
在react 17中，还是有必要处理一下，否则控制台的报错会很影响心情。