reactjs - useEffect 中的无限循环，useEffect 中的 async/await

Question

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

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

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

下面的工作完美，所以这不应该改变。

  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()实现useEffectasync/await 中，但实现getExistingCards()实际上并不是一个承诺。

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

标签： reactjsreact-hookssetstateuse-effectreact-state-management

Answer 1

只需在执行嵌入式功能之前检查卡片的长度

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