Question

所以我有一个运行 async 的函数，所以把 async 放在 useEffect 里面，下面是我的代码

 useEffect(() => {
    const data = async () => {
      const data = await getAllVertification();
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    };

    data();
  }, [update]);

但是像这样衰落了

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.

谁能给我解释一下？

Answer 1

卸载组件时，您需要在 await 解析后取消操作。这是执行此操作的方法之一。

  useEffect(() => {
    let isSubscribed = true;
    const data = async () => {
      const data = await getAllVertification();
      if(isSubscribed) {
        if (!data.status) {
        } else {
          setAlldata(data.data);
          setLoadingAction([]);
          let tmp = [];
          for (const element of data.data) {
            tmp.push({ status: false });
          }
          setLoadingAction(tmp);
        }
      }
    };
    data();
    return () => (isSubscribed = false);
  }, [update]);

Answer 2

重写代码使其更清晰：

 useEffect(() => {
    const getData = async () => {
      const data = await getAllVertification();
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    };

    getData();
  }, [update]);

这里的 getData 是一个 Async 函数，这意味着当您运行它时，它会返回一个承诺，该承诺将在当前事件循环周期结束时执行。不过，您不必制作 getData。
试试这个：

 useEffect(() => {
    getAllVertification().then(data => {
      if (!data.status) {
      } else {
        setAlldata(data.data);
        setLoadingAction([]);
        let tmp = [];
        for (const element of data.data) {
          tmp.push({ status: false });
        }
        setLoadingAction(tmp);
      }
    }
  }, [update]);

Answer 3

使用自定义钩子，我们可以执行以下操作：

             angles  degrees
A circle          0        0
  triangle        0        0
  rectangle       0        0
B square          4      360
  pentagon        5      540
  hexagon         6      720

useEffect 内部的异步反应

3 个答案: