Javascript useEffects中的异步API调用和更新useState

我有下面的代码

const [status, statusSetter] = useState({ isAuthenticated: false });

useEffect(() => {
    let didCancel = false;
    
    async function fetchMyAPI() {
        if (!didCancel) {
            let response = (await axios.get('api/auth/getuserstatus')).data;

            statusSetter(response);

        }
        
    }

    fetchMyAPI();

    return () => {
        didCancel = true;
    }
    }, []);

我已经尝试过实现

didconcel

作为一种清除userEffects的形式，但它不起作用。我得到以下错误： 无法对未安装的组件执行React状态更新。这是一个no op，但表示应用程序内存泄漏

---

我应该在清理中放入什么？

该变量应该只阻止调用statusSetter:

async function fetchMyAPI() {
        let response = (await axios.get('api/auth/getuserstatus')).data;
        !didCancel && statusSetter(response);       
}

但是，基本上，这是一种黑客行为，因为这种方法无法清除任何东西。我们保留了无用的背景工作，只是不改变结果中的组件状态。我们应该以某种方式中止挂起的get请求

通过定制的实验钩子，我们可以编写自动取消的异步例程。例如，如果在获取（）时卸载了组件，则以下json请求将自动中止：

---

此代码应适用于您：

const [status, statusSetter] = useState({ isAuthenticated: false });
let didCancel = false;
useEffect(() => {

async function fetchMyAPI() {
    let response = (await axios.get('api/auth/getuserstatus')).data;
    if (!didCancel) {
        statusSetter(response);
    }
}

fetchMyAPI();

return () => {
    didCancel = true;
}
}, []);

---

使用axios，您可以这样做：

  useEffect(() => {
    const source = axios.CancelToken.source();
    fetchMyAPI(source);
    return () => {
      source.cancel();
    };
  }, []);

然后在fetch函数中

const fetchMyAPI = async (source) => {
    try {
      const response = await axios({
        cancelToken: source.token,
      });
    } catch (err) {
      if (!axios.isCancel(err)) {
         // TO DO...
      }
    }
  };

---

这里回答的问题是否回答了您的问题：问题是

didconcel

在效果回调中的过时封装。您应该使用Axios cancel令牌来取消任何机上请求。第一种方法，我查看了代码，下面是发生的情况，不知何故，返回方法首先执行操作，使didCancel为true，这样数据就永远不会加载。你能帮我一下吗？我看了一遍代码，下面是发生的情况，不知何故，返回方法首先执行操作，使didCancel为true，这样数据就永远不会加载。你能帮我一下吗？然后你的组件因为某种原因被卸载了。你能把console.log放在那里，看看它被卸载了多少次吗？

const fetchMyAPI = async (source) => {
    try {
      const response = await axios({
        cancelToken: source.token,
      });
    } catch (err) {
      if (!axios.isCancel(err)) {
         // TO DO...
      }
    }
  };