useEffect 中的無限循環，useEffect 中的 async/await

Question

我知道這個問題已經被問了很多 - 但我需要一些幫助！

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

getExistingCards()應該setCards如果1) 卡片存在，並且 2) cards是一個空數組（如果cards已經設置為existingCards ，我不想將 setCards 設置為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()添加到實現異步/等待的useEffect中，但意識到getExistingCards()實際上並不是一個承諾。

任何見解將不勝感激 - 謝謝

Answer 1

在執行嵌入式功能之前只需檢查卡片的長度

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