Reactjs 偶尔会出现在useffect（）中生成清理函数的警告

我正在使用AWS Amplify，当用户注销时，我会收到一条警告：

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.

它提到它出现在

Profile.tsx

文件中，这是useffect（）挂钩

但问题是错误有时会发生

我一直在测试它，它来了又去，我不知道为什么会这样

 function Profile() {

  const [user, setUser] = useState<IIntialState | null>(null);

  useEffect(() => {
    checkUser();
    Hub.listen("auth", data => {
      const { payload } = data;
      if (payload.event === "signOut") {
        setUser(null);
      }
    });
  }, []);

  async function checkUser() {
    try {
      const data = await Auth.currentUserPoolUser();
      const userInfo = { username: data.username, ...data.attributes };
      console.log(userInfo);
      setUser(userInfo);
    } catch (err) {
      console.log("error: ", err);
    }
  }
  function signOut() {
    Auth.signOut().catch(err => console.log("error signing out: ", err));
  }
  if (user) {
    return (
      <Container>
        <h1>Profile</h1>
        <h2>Username: {user.username}</h2>
        <h3>Email: {user.email}</h3>
        <h4>Phone: {user.phone_number}</h4>
        <Button onClick={signOut}>Sign Out</Button>
      </Container>
    );
  }
  return <Form setUser={setUser} />;
}

函数配置文件（）{
const[user，setUser]=useState（null）；
useffect（（）=>{
checkUser（）；
Hub.listen（“auth”，data=>{
const{payload}=数据；
如果（payload.event==“注销”）{
setUser（空）；
}
});
}, []);
异步函数checkUser（）{
试一试{
const data=wait Auth.currentUserPoolUser（）；
const userInfo={username:data.username，…data.attributes}；
console.log（userInfo）；
setUser（userInfo）；
}捕捉（错误）{
log（“错误：”，err）；
}
}
函数签出（）{
Auth.signOut（）.catch（err=>console.log（“error signing out:”，err））；
}
如果（用户）{
返回(
轮廓
用户名：{user.Username}
电子邮件：{user.Email}
电话：{user.Phone_number}
退出
);
}
返回；
}

之所以发生这种情况，是因为您卸载了组件，但其中仍有订阅

React useffect提供卸载功能：

  useEffect(() => {
    Hub.listen("auth", func);
    return () => {
    // unsubscribe here
     Hub.remove("auth", signOut)
    };
 });

并且您的Hub类具有remove方法

remove(channel: string | RegExp, listener: HubCallback): void

在useffect返回功能中删除您的订阅

---

无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理功能中的所有订阅和异步任务。

信息是直截了当的。我们正在尝试更改组件的状态，即使它已卸载且不可用

出现这种情况的原因有很多，但最常见的是我们没有取消订阅websocket组件，或者在异步操作完成之前卸载了websocket组件。要解决此问题，您可以执行以下操作之一：

 useEffect(() => {
    checkUser();
    //check howto remove this listner in aws documentation  
    const listner= Hub.listen("auth", data => {
      const { payload } = data;
      if (payload.event === "signOut") {
        setUser(null);
      }
    });

    //this return function is called on component unmount 
    return ()=>{/* romve the listner here */}
  }, []);

或者采用这种简单的方法

 useEffect(() => {
    let mounted =true
    Hub.listen("auth", data => {
      const { payload } = data;
      if (payload.event === "signOut" && mounted ) {
        setUser(null);
      }
    });


     //this return function is called on component unmount 
    return ()=>{mounted =false }
  }, []);

阅读更多关于

---

我是否将

Hub.remove（）

放在清理函数中？另外，作为

频道

和

监听器

我需要传递什么？您已经订阅了“auth”Hub.listen（“auth”，func）。在网络中签出ws选项卡时，订阅应该仍然存在于挂载组件上。尝试从it中心取消订阅。删除（'auth'）也可能导致内存泄漏，每次呈现组件时都有新订阅，但从未取消订阅是的，在返回函数中退出。请检查我的更新

remove（）

接受了两个参数。这同样有效，但我使用了另一个参数，因为它更适合AWS Amplify的特定用例。