React Hooks无限循环内存泄漏？

Question

您好，我遇到了无限循环的问题。我看到的所有示例都使循环消失了。但是如果我不刷新它就不会更新我的视图。我希望在添加某些内容时显示这些项目。我以为我的例子会起作用，但它没有。我不知道如何解决它

      const [ReadBookingTimes, SetBookingTimes] = useState([]);
      const [readStatus, setStatus] = useState("");
        
        const getBookingTimes = async () => {
            try {
              const response = await Axios.get(`${API_ENDPOINT}`);
              console.log(response);
              // debugger;
              SetBookingTimes(response.data);
              // setStatus("Connection sucsessfull");
            } catch (err) {
              setStatus("Error getting BookingTimes");
            }
          };
        
          //reupdate State and prevent infinite loop
          useEffect(() => {
            getBookingTimes(ReadBookingTimes);
          }, [ReadBookingTimes]); //);

Answer 1

您的 useEffect 具有每次更新的依赖关系 ReadBookingTimes。基本上，您每次都会一遍又一遍地更新ReadBookingTimes。

你应该做的是添加一个条件来检查你的数据是否已经加载，如果是，不要调用该函数：

const [ReadBookingTimes, SetBookingTimes] = useState([]);
const [readStatus, setStatus] = useState("");

const [dataLoaded, setDataLoaded] = useState(false);


 const getBookingTimes = async () => {
     // Your fetch code
     setDataLoaded(true)
 }

 useEffect(() => {
     // don't go any further of data is already loaded.
     if (dataLoaded) return;

     getBookingTimes(ReadBookingTimes);
 }, [ReadBookingTimes, dataLoaded]);

现在您不会陷入循环。并且任何时候你想重新加载数据，你可以将dataLoaded更改为false，useEffect会再次调用getBookingTimes函数。

例如，如果您希望每 2 分钟获取一次数据，您可以添加超时以更改 dataLoaded 状态，每次导致另一次数据重新加载。