向 React 钩子添加依赖项会导致无限循环

Question

我正在尝试使用从父组件收到的 props 更新状态。

但是 react 不断发出警告消息以添加正在更新的状态以添加到依赖项列表中，而我希望效果仅在组件挂载时运行一次。

下面是引发警告消息的组件的代码：

const [selectedDate, setSelectedDate] = useState(undefined);
const [disableDate, setDisableDate] = useState([]);
useEffect(() => {
const key = Object.keys(slots);
setDisableDate([
...disableDate,
{
before: new Date(key[0]),
after: new Date(key[key.length - 1])
}
]);
if (!_.isEmpty(slots))
Object.keys(slots).forEach(slot => {
if (slots[slot].length === 0) {
const date = moment(slot)
.tz("Asia/Kolkata")
.toISOString(true);
setDisableDate([...disableDate, new Date(date)]);
}
});
}, []);

当上面的代码运行时，它工作正常，但它总是给出以下警告。

React Hook useEffect 缺少依赖项："disableDate"和 "插槽"。要么包含它们，要么删除依赖项数组。您可以 如果您只做一个功能更新"setDisableDate(d => ...(" 在"设置禁用日期"调用中需要"禁用日期" 反应钩子/穷举部门

如何解决此问题？

Answer 1

尝试对两个setDisableDate调用进行功能更新，如警告所示：

setDisableDate(prevDisableDate => [
...prevDisableDate,
{
before: new Date(key[0]),
after: new Date(key[key.length - 1])
}
]);

setDisableDate(prevDisableDate => [...prevDisableDate, new Date(date)]);

这样，disableDate就不会在useEffect内部使用，也无需将其添加到依赖项数组中。

Answer 2

可以通过在依赖项数组之前添加// eslint-disable-next-line react-hooks/exhaustive-deps行来禁用该警告消息。这样，useEffect回调仍将只触发一次，但您不会同时看到警告消息。

就像下面这样：

useEffect(() => {
// ... your code
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

我希望这有帮助！