警告：无法在 React 本机中对未安装的组件执行 React 状态更新

Posted 2023-02-16

【中文标题】警告：无法在 React 本机中对未安装的组件执行 React 状态更新

【英文标题】：Warning: Can't perform a React state update on an unmounted component in React native

【发布时间】：2022-01-13 05:14:33

【问题描述】：

我正在从 axios 获取数据。但有时数据会出现，而有些数据最初没有显示数据。

get-specific-salary-api.js：---

const AllSpecificSalaryAPI = (yearMonthFilter) => 
  const [specificAllAPIData, setAllSpecificAPIData] = useState("");
  const loginAuthToken = useSelector(
    (state) => state.loginAuthTokenReducer.loginAuthToken
  );
  //NOTE:taking oved input and company selection code for dynamic parameter
  const companyValue = useSelector(
    (state) => state.changeCompanyReducer.company
  );
  const companyCode = companyValue[0];
  const employeeId = companyValue[1];

  useEffect(() => 
    axios
      .get(GET_ALL_SPECIFIC_SALARY, 
        params: 
          hev: companyCode,
          year_month: yearMonthFilter,
          oved: employeeId,
        ,
        headers: 
          Authorization: `Bearer $loginAuthToken`,
        ,
      )
      .then((response) => response.data)
      .then((data) => setAllSpecificAPIData(data))

      .catch((error) => 
        if (error.status === 401) 
          //NOTE: handling token expire
          return ExpireAlertRestart();
         else 
          Alert.alert(error.message);
        
      );
  , []);

  return 
    specificAllAPI: specificAllAPIData,
  ;
;

export default AllSpecificSalaryAPI;

我收到了警告信息。

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.
at [native code]:null in dispatchAction
at src/api/get-specific-salary-api.js:32:12 in axios.get.then.then$argument_0

我该如何解决这个警告信息？

【问题讨论】：

这能回答你的问题吗？ ***.com/a/68467084/8690857

【参考方案1】：

在你的 useEffect 中，像这样清理你的状态：

const [specificAllAPIData, setAllSpecificAPIData] = useState(null);

useEffect(() => 
    return () => 
        setAllSpecificAPIData(null);
    ;
  , []);

请查看有关 useEffect 如何工作的更好解释here

【参考方案2】：

你得到这个是因为组件尝试update the state 即使组件已卸载。

要解决这个问题，您可以使用指示组件的卸载指示变量。在卸载时，它会拦截其间的状态更新请求并取消。

let hasUnmounted = false;
useEffect(() => 
  axios
    .get(GET_ALL_SPECIFIC_SALARY, 
      params: 
        hev: companyCode,
        year_month: yearMonthFilter,
        oved: employeeId,
      ,
      headers: 
        Authorization: `Bearer $loginAuthToken`,
      ,
    )
    .then((response) => response.data)
    .then((data) => 
      if (hasUnmounted) return;
      setAllSpecificAPIData(data)
    )

    .catch((error) => 
      if (hasUnmounted) return;
      if (error.status === 401) 
        //NOTE: handling token expire
        return ExpireAlertRestart();
       else 
        Alert.alert(error.message);
      
    );
  return () => 
    hasUnmounted = true;
  
, []);

检查此链接以实现：https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/updateErr.js

注意：在codesandbox's browser中转至https://ikqdn.csb.app/err

【讨论】：

在使用这个之后，我收到了另一个警告信息。 ` 警告：无法从不同组件的函数体内更新组件。`

没有收到任何此类警告。检查链接，我已经编辑了帖子。并在代码沙盒浏览器中进入ikqdn.csb.app/err 的控制台。 5秒内点击To rand，关注codesandox控制台。我认为新的警告出现在其他一些组件中