如何清理 useEffect 函数？答案

【问题标题】：How to clean up the useEffect function?如何清理 useEffect 函数？
【发布时间】：2020-04-09 12:11:53
【问题描述】：

我刚开始反应并开始使用钩子，但我在控制台上收到警告

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 中的所有订阅和异步任务清理功能

我试图通过定义一个变量来检查它是否卸载来修复它（在另一个 stackoverflow 问题上看到。但它没有用。

这是我的代码

const Page1 = (props) => {
    const [averageAPICallsPerDay, setAverageAPICallsPerDay] = useState(false);
    const [org, setOrg] = useContext(OrgContext);
    const [catalog, setCatalog] = useContext(CatalogContext);
    const [didMount, setDidMount] = useState(false);

    function getAverageAPICallPerDay() {
        axios.get(`${ANALYTICS_BASEPATH}/${org}/${catalog}/analytics/calls/average`)
            .then(res => setAverageAPICallsPerDay(res.data.data.averageCalls))
            .catch(err => setAverageAPICallsPerDay('No records found'))
    }

    useEffect(() => {
        setDidMount(true);
        getAverageAPICallPerDay()

        return(didMount)
    }, [catalog, org])

    return(
        <Container>   
            <SubContainer>
                <Row>
                    <Col><Card cardTitle="Total API Calls" totalCalls={averageAPICallsPerDay}/></Col>
                </Row>
            </SubContainer>
        </Container>
    );
};

【问题讨论】：

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

我认为这里的问题可能是在卸载组件后，您正在从 then 或 catch 函数更新您的状态。我认为您可以在效果的顶部定义一个带有 false 的 isCancelled 变量，并从您的效果返回一个将其设置为 true 的函数，并在您的 then 函数中检查该函数.. 像这样。

useEffect(() => {
  let isCanceled = false
  function getAverageAPICallPerDay() {
    axios.get(`${ANALYTICS_BASEPATH}/${org}/${catalog}/analytics/calls/average`)
        .then(res => {
          if (!isCanceled) {
            setAverageAPICallsPerDay(res.data.data.averageCalls)
          }
          })
        .catch(err => {
          if (!isCanceled) {
            setAverageAPICallsPerDay('No records found')
          }
        })
  }
  setDidMount(true);
  getAverageAPICallPerDay()

  return () => {
    isCanceled = true
  }
}, [catalog, org])

【讨论】：