即使安装了axios cancel令牌，也无法在已卸载的组件上执行React状态更新

Question

我正在使用Axios取消请求，我认为这是为了防止出现此错误，但我仍然收到它。基本上，我进入一个屏幕，它正在从服务器中获取数据。如果在加载完成之前返回上一个屏幕，则会收到错误消息。

  useEffect(() => {
    const ourRequest = Axios.CancelToken.source();
    setLoading(true);
    const getPub = async () => {
      try {
        const response = await Axios.get("https://.....", {
          cancelToken: ourRequest.token,
        });
        if (response.data) {
          const info = await Axios.get(
            'http://anotherurl', {
                cancelToken: ourRequest.token,
             });
          setPub(pubInfo.data);
          setLoading(false);
        }
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };
    getPub();
    return () => {
      ourRequest.cancel();
    };
  }, []);

Answer 1

该请求已成功取消，它将转到catch块，但是catch块执行了setState“ setLoading（false）”，但该组件已被卸载。您可以在catch块上执行条件以检查请求是否被取消。

try {
    ...
} catch (err) {
    if(!request is canceled){
        setError(err);
        setLoading(false);
    }
}