React中useEffect清理函数的正确使用及Axios请求取消后仍触发未挂载组件状态更新警告的问题咨询

大家好，我最近在React项目里碰到了一个头疼的警告：Can't perform a state update on an unmounted component。我明白这个警告出现的原因——组件在异步请求完成之前就已经卸载了，但之后还是调用了setData（相当于类组件里的setState），React不允许给已经不存在的组件更新状态，所以抛出了这个警告。

先给大家看看我最开始的代码：

useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get('/api/data');
    setData(res.data); // 如果组件在请求完成前卸载，就会触发警告
  };
  fetchData();
}, []);

为了修复这个问题，我尝试用AbortController配合useEffect的清理函数来取消请求，更新后的代码是这样的：

useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    const res = await axios.get('/api/data', { signal: controller.signal });
    setData(res.data);
  };
  fetchData();
  return () => controller.abort(); // 这样写对吗？
}, []);

我原本以为，在清理函数里返回controller.abort()就能在组件卸载时终止请求，这样就不会再触发setData了。但实际测试下来，那个警告还是会出现。我是不是漏掉了什么细节？这种用Axios配合清理函数取消请求的方式到底对不对？有没有其他更合适的处理请求取消的方法呢？

内容来源于stack exchange