React钩子中缺少依赖项的esint警告总是正确的吗

Question

我想知道React钩子中错误设置依赖关系的esint规则是否总是正确的。在我的示例中，calendarIds对象处于状态。当查询是current-day时，我将calendarIds对象初始化为一些数据。如果页面查询参数从curent-day更改为其他内容，我想重置calendarIds对象：

const {calendarData, query} = props
useEffect(() => {
console.log('useeffect2');
if (query['date-range'] === 'current-day') {
const [currentDay = { events: [] }] = calendarData;
const events = currentDay.events.reduce((acc, { calendarId, actual, trend }) => {
acc[calendarId] = { actual: actual || Math.round(Math.random() * 1000),
trend };
return acc;
}, {});
console.log(CALENDAR_IDS, 'events', events);
setState({
type: CALENDAR_IDS,
payload: events
});
} else if (state.realTimeData.calendarIds) {
setState({
type: CALENDAR_IDS,
payload: {}
});
}
}, [calendarData, query]);

依赖数组包括触发函数的calendarData和query。在else if中，我检查calendarIds是否已经处于状态，如果是，我将其重置。

因此，我得到了一个丢失的state.realTimeData.calendarIds依赖项。然而，我不明白为什么不将其包含在依赖项数组中会出现问题。相反，它甚至可能触发状态更新的无限循环。

Answer 1

您的useEffect取决于定义的state.realTimeData.calendarIds，这就是您收到该警告的原因。您正在使用useEffect上下文之外的值。您还将使用setState覆盖state.realTimeData.calendarIds数据；不确定这是否是故意的。一个简单的解决方案是对条件使用ref，这样就可以依赖于不引起无限循环。