反应钩子 - 太多的重新渲染

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 将运行或更改其状态 在 React 中，如果状态发生变化，它将再次渲染 所以代码将再次运行(if 语句(，然后 setShowReminder 将再次运行，它将再次更改状态....导致重新渲染过多

尝试使用 useEffect 钩子并将数组作为第二个参数传递给 使用效果

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