useEffect 挂钩不等待异步依赖项

Question

我使用 useEffect 钩子在包含 API 调用的异步函数返回一个对象数组之后实现一些逻辑，该对象数组是钩子的依赖项。

问题是钩子本身并没有等待数组更改来执行其中的逻辑，它只是执行即使availableSitesis still []：

const [availableSites, setAvailableSites] = useState([]);

useEffect(initialize, [getAxiosInstance])

async function initialize() {
    // ...
    const initPage = async () => {
      try {
        const response = await getAxiosInstance().get(GetObjects); // Api EndPoint
        if (response.data) {
          setAvailableSites(response.data); // data for availableSites
          const Secondresponse = await somePromise(); // Another API call thas lasts around 10 seconds
          if (response && response.status === 200) {
            // ...
          }
        }
      } catch {
        // ...
      }
    };
    initPage();
  }
        
// useEffect that is failing
useEffect(() => {
  // I want this to happen when availableSites has recieved the data
}, [availableSites]);

Answer 1

useEffect总是至少执行一次，无论它有什么依赖项。如果您只想在设置数据时执行它，请使用类似以下内容的内容：

useEffect(() => {
  if(availableSites.length > 0) {
    doSomething...
  }
}, [availableSites]);

如果来自后端的 availableSites 可能为空，请将 availableSites 的初始状态设置为null并检查它是否不在nulluseEffect 中