无法对 Reactjs 中的未安装组件警告执行 React 状态更新

Question

当我运行他的代码时，我在控制台中收到以下警告。

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

这是我的代码：

 const [userDetail, setUserDetail] = React.useState('');
  const personalDetails = (user_id) => {
    axios
    .get(`http://localhost:3001/users/${user_id}`, { withCredentials: true })
    .then((response) => {
      const personalDetails = response.data;
      setUserDetail(response.data);
    })
    .catch((error) => {
      console.log(" error", error);
    });
  };
  React.useEffect(() => {
   if (user_id) {
    personalDetails(user_id);
  }
}, [user_id]);

如果我删除 useEffect 调用，此错误就会消失。这里有什么问题？

Answer 1

这似乎是正在发生的事情：

1. 您的组件已安装。
2. 您的效果运行，开始发出 HTTP 请求。
3. 组件因任何原因卸载（父组件正在删除它）。
4. HTTP 请求完成，并且您的回调调用 setUserDetail，即使组件已卸载。

另一个问题是您在使用它的效果之外定义personalDetails。

我会做出两个改变：

1. 将personalDetails 函数的主体移动到效果内。
2. 如果组件卸载或user_id 发生更改，那么您不想再调用setUserDetail，因此使用aborted 变量来跟踪这一点。

const [userDetail, setUserDetail] = React.useState("");

React.useEffect(() => {
  if (user_id) {
    let aborted = false;

    axios
      .get(`http://localhost:3001/users/${user_id}`, { withCredentials: true })
      .then((response) => {
        const personalDetails = response.data;

        // Don't change state if the component has unmounted or
        // if this effect is outdated
        if (!aborted) {
          setUserDetail(response.data);
        }
      })
      .catch((error) => {
        console.log(" error", error);
      });

    // The function returned here is called if the component unmounts
    // or if the dependency list changes (user_id changes).
    return () => (aborted = true);
  }
}, [user_id]);