reactjs - 偶尔会出现在 useEffect() 中创建清理函数的警告

Question

我正在使用 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 文件中，这是 useEffect() Hook 。

但问题是错误有时会发生。

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

 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} />;
}

Answer 1

发生这种情况是因为您的组件已卸载，但您仍然有订阅。

React useEffect 提供卸载功能:

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

而且你的 Hub 类有 remove 方法

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

在useEffect返回函数中移除你的订阅

Hub.remove()