Question

我想知道在React钩子中误认为依赖的eslint规则是否总是正确的。在我的示例中，我有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上下文之外的值。您还用state.realTimeData.calendarIds覆盖了setState数据；不知道这是否是故意的。一个简单的解决方法是对条件使用ref，因此您可以依靠不引起无限循环。

在React钩子中缺少依赖项的eslint警告是否总是正确的？

1 个答案: