Блог

Главная - Вопросы по программированию - Реагирует на утечку памяти в бесконечном цикле?

Реагирует на утечку памяти в бесконечном цикле?

#reactjs #axios #react-hooks #infinite-loop #use-effect

#reactjs #axios #реагирует на крючки #бесконечный цикл #использование-эффект

Вопрос:

Привет, у меня проблема с бесконечными циклами. Все примеры, на которые я смотрю, заставляют цикл исчезнуть. Но тогда это не обновит мое представление, если я не обновлю. Я хочу, чтобы элементы появлялись при добавлении чего-либо. я думал, что мой пример сработает, но это не так. Я не знаю, как это исправить

       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]); //);

Ответ №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 to false и useEffect снова вызвать getBookingTimes функцию.

Например, если вы хотите получать данные каждые 2 минуты, вы можете добавить тайм-аут для изменения dataLoaded состояния каждый раз, вызывая очередную перезагрузку данных.

Комментарии:

1. должны ли мои данные загружаться после данных ответа?

2. Я попробовал это, и это не обновляет мое представление при добавлении элементов. но он больше не зацикливается или, может быть, он не запускается сейчас, потому что я загружаю данные с помощью Postman? или это должно быть повторным?

3. Да, после загрузки вашего ответа. Что вы подразумеваете под добавлением элементов? Вы не добавляете никакого нового элемента.

4. Прямо сейчас я использую postman для добавления данных в список. но я создам функцию для добавления содержимого в список. я хочу, чтобы он автоматически отображался, чтобы я мог видеть элементы без обновления страницы.

5. Вы можете установить dataLoaded значение «назад false » при добавлении нового элемента, и тогда ваша usEffect функция будет запущена, а затем она снова загрузит данные, вызывая повторный рендеринг.

Метки: