useEffect 中的无限循环，useEffect 中的 async/await答案

【问题标题】：Infinite loop in useEffect, async/await in useEffectuseEffect 中的无限循环，useEffect 中的 async/await
【发布时间】：2020-04-07 05:48:44
【问题描述】：

我知道这个问题被问了很多 - 但我需要一些帮助！

我希望getExistingCards() 执行和setCards 之前 updateActivity()。

getExistingCards() 应该是setCards 如果 1) 卡片存在，并且 2) cards 是一个空数组（如果cards 已经设置为existingCards，我不想将卡片设置为existingCards！）

以下内容完美运行，因此不必更改。

  const [cards, setCards] = useState([]);

  useEffect(() => {
    updateActivity(path, cards);
  }, [cards]);

在下面添加getExistingCards() 会导致无限循环（这是有道理的，因为我知道我在效果中设置状态，并且卡片也在依赖数组中）：

  // useLayoutEffect executes before useEffect
  useLayoutEffect(() => {
    const getExistingCards = () => {
      if (activity) {
        if (path.field === "activity_milestones" || path.field === "activity_indicators") {
          let existingItems = activity[path.field]
          if (existingItems) {
            setCards(existingItems);
          }
        }
      }
    };
    getExistingCards();
  }, []);

  useEffect(() => {
    updateActivity(path, cards);
  }, [cards]);

我还尝试将 updateActivity() 和 getExistingCards() 添加到实现 async/await 的 useEffect 中，但意识到 getExistingCards() 实际上并不是一个承诺。

任何见解将不胜感激 - 谢谢

【问题讨论】：

cards不在useLayoutEffect的依赖数组中吧？
@Agney - 正确，我只希望 getExistingCards() 在页面最初呈现时执行，并将 setCards 设置为存在的任何内容（如果存在）。
那么是什么导致了无限循环？
您能否为您的案例提供更多代码，例如updateActivity 内部的内容，path 和activity 来自哪里？

标签： reactjs react-hooks setstate use-effect react-state-management

【解决方案1】：

在执行嵌入式函数之前检查卡片的长度

  useEffect(() => {
   if (cards.length === 0) updateActivity(path, cards);
  }, [cards]);

【讨论】：