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);
          }

在上面的代码中，条件为true 那么setShowReminder将运行或更改其状态在反应中，如果状态改变，它将再次呈现因此代码将再次运行（if语句），然后setShowReminder将再次运行，并且将再次更改状态....导致重新渲染次数过多

尝试使用useEffect挂钩，并像这样将数组作为第二个参数传递给useEffect

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

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

React Hooks-重新渲染过多

1 个答案: