使用 Promise 清理 useEffect 的正确方法

Question

我有useEffect一个回调函数，可以从多个 API 中获取一些数据。为此，我正在使用Promise并且我的代码如下所示：

useEffect(() => {
   const fetchAllData = async () => {
      const resourceOne = new Promise((resolve) => {
         // fetching data from resource one and changing some states
      })
      const resourceTwo = new Promise((resolve) => {
         // fetching data from resource two and changing some states
      })
      const resourceThree = new Promise((resolve) => {
         // fetching data from resource three and changing some states
      })

      await Promise.all([resourceOne, resourceTwo, resourceThree])
      .then(() => {
         // changing some states
      })
   }

   return fetchAllData()
},[])

我如何理解在这种情况下useEffect在获取所有数据之前卸载然后给我一个警告

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

那么如何编写正确的清理代码来避免这个警告呢？

Answer 1

您可以使用布尔值并在清理函数中切换它（在传递给的回调中返回的函数useEffect）

useEffect(() => {
    let shouldUpdate = true;

    const fetchAllData = () => {
       const resourceOne = new Promise((resolve) => {
          // fetching data from resource one and changing some states
       })
       const resourceTwo = new Promise((resolve) => {
          // fetching data from resource two and changing some states
       })
       const resourceThree = new Promise((resolve) => {
          // fetching data from resource three and changing some states
       })
 
       Promise.all([resourceOne, resourceTwo, resourceThree])
        .then(() => {
           if(shouldUpdate) {
               // update state
           }
       })
    }
 
    fetchAllData()
    return () => {
        shouldUpdate = false;
    }
 },[])

如果组件被卸载，则将调用清理函数并将shouldUpdate其更改为 false。当承诺解决时，状态将不会更新，因为shouldUpdate不再正确。