异步内部 useEffect 反应答案

【问题标题】：async inside useEffect react异步内部 useEffect 反应
【发布时间】：2021-05-30 18:03:47
【问题描述】：

所以我有一个运行异步的函数，所以把异步放在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.

谁能给我解释一下？

【问题讨论】：

这对您有帮助吗？ stackoverflow.com/questions/53332321/…
错误/警告具体有什么不清楚的地方？

标签： reactjs next.js

【解决方案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]);

【讨论】：

【解决方案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 是一个异步函数，这意味着当您运行它时，它会返回一个承诺，该承诺将在当前事件循环周期结束时执行。不过，您不必制作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]);

【讨论】：

【解决方案3】：

使用自定义钩子，我们可以做到以下几点：

import { useAsyncEffect } from "use-async-effect2";

// ...

 useAsyncEffect(function*(){
      const data = yield getAllVertification();
      if (data.status) {
        setAlldata(data.data);
        let tmp = [];
        for (const element of data.data) { 
          tmp.push({ status: false }); // weird code
        }
        setLoadingAction(tmp);
      }
    };
  }, [update]);

【讨论】：