useEffect 依赖数组不断调用api数据答案

【问题标题】：useEffect dependency array continuously calls api datauseEffect 依赖数组不断调用api数据
【发布时间】：2021-08-07 12:07:24
【问题描述】：

使用 Axios，我将从组件中的实用程序文件呈现后端数据。

在我的useEffect 挂钩中，我有一个条件语句来检查选定的日期。如果日期匹配，我会返回一个可供预约的时间段。

const [availableDates, setAvailableDates] = useState();
const [currentTimeSlot, setCurrentTimeSlot] = useState();
const [timeSlots, setTimeSlots] = useState();
  
useEffect(() => {
    async function getData(data) {
      let tempObjStoreData = service.getTempObjStoreData();
      let dates = await service.stepDate.getAvailableData();
      console.log('dates', dates);
      setAvailableDates(dates);
      setFlagRender(true);
      // this effect will run every time currentDate is changed
      if (availableDates) {
        console.log('show dates', dates);
        // get time slots of currentDate
        let slots;
        dates.forEach((d) => {
          debugger;
          if (isEqual(availableDates, new Date(d.date))) {
            slots = d.timeSlots;
          }
        });
        setTimeSlots(slots);
      }
    }
    return getData();
  }, [availableDates]);

当我测试组件时，我可以选择一个日期。然而，时隙在消失之前只是短暂显示。查看控制台日志中的availableDates，我发现它一直在被调用。

查看其他类似这样的 S/O 问题：React Hook useEffect : fetch data using axios with async await .api calling continuous the same api，解决方案是 useEffect 钩子末尾的空括号：

解决方案示例

useEffect(() => {
    fetchData();
}, []); //This will run only once

我的 useEffect 钩子结束

  }, [availableDates]);

但是，如果我删除它，我会收到以下错误：

React Hook useEffect has a missing dependency: 'availableDates'.
Either include it or remove the dependency array.

如何阻止 useEffect 不断呈现这些数据？

【问题讨论】：

在效果内只调用 getData() 而不是 return getData()。
移动 availableDates 到 ref (useRef)
您希望何时重新触发新的抓取？你提到了selected date，但我没有在代码中看到它......
因为你的使用效果递归工作，你需要将[availableDates]更改为[]并写另一个[availableDates]只有其他动作在这个setAvailableDates里面这个useEffect里面不使用

标签： reactjs react-hooks

【解决方案1】：

您不需要 availableDates 作为依赖项，因为您只想设置它，而不是从中读取。您可能想要添加一些 selectedDate 依赖项，因为您希望在它发生更改时重新触发提取。

我还实现了一个“dispose”函数，因为您的异步代码可能会在该组件从 DOM 中删除后运行。

const [availableDates, setAvailableDates] = useState();
const [currentTimeSlot, setCurrentTimeSlot] = useState();
const [timeSlots, setTimeSlots] = useState();
  
useEffect(() => {
    let canceled = false;
    async function getData(data) {
      let tempObjStoreData = service.getTempObjStoreData();
      let dates = await service.stepDate.getAvailableData();
      if (canceled) {
         return; // ignore the result, as this `useEffect` was canceled
      }

      setAvailableDates(dates);
      setFlagRender(true);

      if (dates) {
        console.log('show dates', dates);
        // get time slots of currentDate
        let slots;
        dates.forEach((d) => {
          if (isEqual(dates, new Date(d.date))) {
            slots = d.timeSlots;
          }
        });
        setTimeSlots(slots);
      }
    }
    getData();

    return () => canceled = true;
    
  }, []);

【讨论】：

【解决方案2】：

如果我是对的，因为每次useEffect 运行时都会更新availableDates，并且每次更改availableDates 时都会触发useEffect，因此会发生无限循环。您可以通过将 availableDates 替换为局部变量 dates 来消除 useEffect 依赖项中对 availableDates 的使用

另外，使用 useEffect 返回一个函数意味着它将在组件卸载之前运行。所以不用返回，只需调用异步函数。

【讨论】：