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