无法清理 useEffect，如何在卸载组件时取消所有异步任务？

Question

我正在使用自定义 react-query 挂钩从我的服务器获取数据，然后在 useEffect 的帮助下我在变量中设置该状态，但是当我卸载我的组件时有时会出现错误：

Can't perform a React state update on an unmounted component.

我试图清理我的 useEffect，但它不起作用，我该怎么办？

  const { data, isLoading, isSuccess } = useGetUsersCurrentDiary();

  useEffect(() => {
    let unmounted = false;
    if (!unmounted) {
      if (diary == null) {
        if (data) {
          setDiary(data);
        }
      }
    }
    return () => {
      unmounted = true;
    };
  }, [data]);

Answer 1

react-query 不需要这样做。您可以只使用从 useQuery 返回的 data 属性 - 无需将其复制到其他地方。这只会带走你的单一事实来源，你需要保持状态同步而没有任何好处。
警告本身将在 react 的下一个主要版本 (react-18) 中删除，因为在许多情况下它是一个错误警告 - 包括这个。您可以在 React 18 Working Group.
中阅读相关内容

Answer 2

您可以使用 useRef 钩子来创建 isMounted 标志。

const { data, isLoading, isSuccess } = useGetUsersCurrentDiary();
const isMounted = useRef();

useEffect(() => {
  isMounted.current = true;
    if (isMounted.current) {
      if (diary == null) {
        if (data) {
          setDiary(data);
        }
      }
    }
    return () => {
      isMounted.current = false;
    };
  }, [data]);

无法清理 useEffect，如何在卸载组件时取消所有异步任务？

Unable to cleanup useEffect, how can I cancel all asynchronous tasks when unmounting my component?

reactjs

react-hooks

react-query