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

我想知道在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]);

依赖项数组包括calendarDataquery,它们触发函数。在else if中,我是否已经拥有calendarIds的状态,如果是,则将其重置。

结果,我缺少对state.realTimeData.calendarIds的依赖。但是我不明白为什么不将其包含在依赖关系数组中会是一个问题。相反,它甚至可能触发状态更新的无限循环。

bmw3i8is 回答:在React钩子中缺少依赖项的eslint警告是否总是正确的?

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

本文链接:https://www.f2er.com/3073608.html

大家都在问