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 状态，从而导致另一次数据重新加载。

React Hooks 无限循环内存泄漏？

React Hooks infinite loop Memory leak?

infinite-loop

reactjs

axios

react-hooks

use-effect