React 挂钩中缺少依赖项的 eslint 警告是否始终正确？

Question

我想知道 eslint 在 React 钩子中丢失依赖项的规则是否总是正确的。在我的示例中，状态中有 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]);

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

因此，我缺少 state.realTimeData.calendarIds 的依赖项。但是我不明白为什么不将它包含在 dependencies 数组中会是一个问题。反之，甚至可能触发无限循环的状态更新。

Answer 1

您的 useEffect 取决于 state.realTimeData.calendarIds 的定义，这就是您收到该警告的原因。您在 useEffect 上下文之外使用值。您还用 setState 覆盖了 state.realTimeData.calendarIds 数据；不确定这是不是故意的。一个简单的解决方法是对条件使用 ref，这样你就可以放心不会导致无限循环。

React 挂钩中缺少依赖项的 eslint 警告是否始终正确？

Are eslint warnings for missing dependencies in React hooks always correct?

reactjs

react-hooks

use-effect