Question

我是新来的反应者，开始使用钩子，但是我在控制台上收到警告

警告：无法在已卸载的组件上执行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>
    );
};

Answer 1

我认为这里的问题可能是，一旦您的组件被卸载，您将通过then或catch函数更新状态。我认为您可以在效果的顶部定义一个isCancelled变量，并将其设置为false，然后从效果中返回一个将其设置为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])

如何清理useEffect函数？

1 个答案: