React Hooks - 太多的重新渲染

Question

我對 javascript 和 react 鈎子都很陌生，並且我不斷收到以下代碼的“重新渲染過多”錯誤

const [showReminder, setShowReminder] = useState(
    lastDismissedDate.diff(overrideDate, 'days') >= 0,
  );

  if (latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date)) {
    setShowReminder(true);
  }

有什么辦法可以將這兩個語句合二為一。 就像是

const [showReminder, setShowReminder] = useState(
    latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date) || lastDismissedDate.diff(overrideDate, 'days') >= 0,
  );

Answer 1

          if (latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date)) 
          {
            setShowReminder(true);
          }

在上面的代碼中，條件為真，則 setShowReminder 將運行或將更改其狀態，如果狀態發生變化，它將再次呈現，因此代碼將再次運行（if 語句），然后 setShowReminder 將再次運行，它會發生變化狀態再次......導致太多重新渲染

嘗試使用 useEffect 鈎子並將數組作為第二個參數傳遞給 useEffect 像這樣

            const [showReminder, setShowReminder] = useState(false);

            useEffect(() => {
               setShowReminder(!showReminder);
            }, [toggle]); // Only re-run the effect if toggle changes