时间戳

首页 > 解决方案 > React - 修复，取消 useEffect 清理函数中的所有订阅和异步任务

javascript - React - 修复，取消 useEffect 清理函数中的所有订阅和异步任务

问题描述

我有以下代码

const Companies = () => {
  const [company, setCompany] = useState(plainCompanyObj);
  const [companiesData, setCompaniesData] = useState([]);
  
  useEffect(() => {
    Call<any, any>({
      url:
        _baseApiUrl +
        "-------api goes here --------",
      method: "GET",
      data: null,
      success: (companies) => {
        setCompaniesData(companies.companies);
      },
      authorization: sessionStorage.getItem("accessToken"),
    });
  }, []);

  return (
    //return JSX
  );
};

我收到以下错误：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.

也只是为了澄清Call标签是axios我用于 URL 错误处理程序等的导入方法。错误提示的问题在该useEffect部分中。

标签： javascriptjqueryreactjsreact-nativeuse-effect

解决方案

您的问题是您setCompaniesData在组件已卸载时调用。所以你可以尝试使用取消令牌来取消 axios 请求。 https://github.com/axios/axios#cancellation

const Companies = () => {
  const [company, setCompany] = useState(plainCompanyObj);
  const [companiesData, setCompaniesData] = useState([]);
  
  useEffect(() => {
    const cancelTokenSource = axios.CancelToken.source();

    Call<any, any>({
      url:
        _baseApiUrl +
        "-------api goes here --------",
      method: "GET",
      data: null,
      cancelToken: cancelTokenSource.token
      success: (companies) => {
        setCompaniesData(companies.companies);
      },
      authorization: sessionStorage.getItem("accessToken"),
    });
  }, []);

  return () => {
       cancelTokenSource.cancel();
  }
};

第二个选项是跟踪组件的已安装状态，并且仅在组件仍已安装时才调用 setState。在此处查看此视频：https ://www.youtube.com/watch?v=_TleXX0mxaY&ab_channel=LeighHalliday

推荐阅读