Блог

Главная - Вопросы по программированию - Как остановить повторяющиеся вызовы Ajax в классе React?

Как остановить повторяющиеся вызовы Ajax в классе React?

#reactjs #ajax #repeat

#reactjs #ajax #повторить

Вопрос:

Я унаследовал старую версию React, которая начинается так:

 var rc = React.createClass({

 render() {

      // Ajax code, here, is called repeatedly for some reason

      return {
           ...
      }
 }
})

Я застрял на этой старой архитектуре кода, и я не смог импортировать компонент React. Я попытался выполнить вызов Ajax на стороне сервера с помощью jQuery и увидел ожидаемый результат, возвращаемый в консоли. Я пытался использовать React для выполнения вызова Ajax, но результат не был возвращен, возможно, из-за отсутствия компонента React. Вот почему я обратился к jQuery вместо этого.

Проблема в том, что по какой-либо причине Ajax вызывался неоднократно, без остановки, для обоих методов React и jQuery (код Ajax не был внутри какого-либо цикла). У меня не было этой проблемы с повторением Ajax дома, когда я использовал последнюю версию React. На работе мне приходилось работать с приведенным выше кодом, реализованным предыдущим разработчиком. Как я могу остановить Ajax от повторных вызовов, учитывая приведенную выше архитектуру кода, в которой я нахожусь? Мне нужно сделать только один вызов Ajax. Есть идеи? Спасибо!

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

1. Вы должны поместить вызов внутри componentDidMount метода, чтобы он вызывался только один раз, после монтирования компонента. И вам также следует изучить React, зная, как работает управление состоянием и каковы методы жизненного цикла, или это только начало ваших головных болей

2. Вы должны поместить свой ajax-код в componentDidMount , или componentDidUpdate . render вызывается изначально, и каждый раз react повторно отправляет компонент, что приводит к повторяющимся вызовам, которые вы видите. componentDidMount запускается один раз, когда компонент сначала монтируется, и componentDidUpdate запускается один раз для каждого повторного запуска, но позволяет сравнивать текущее и предыдущее состояние / реквизиты.

3. Спасибо Джейкобу и Джейсу, да, я согласен. Как указано выше, у меня не было этой проблемы при использовании последней версии React для моей личной работы дома, и да, я поместил свой вызов ajax в «componentDidMount», и он отлично работал. Вышеупомянутая проблема с кодом была связана с моим рабочим местом, и я застрял в этой архитектуре кода. Я имею в виду, что мне не удалось импортировать компонент React для выполнения ajax. «componentDidMount» не работает без предварительного импорта компонента React, но это довольно старый код, который не принимает импорт компонента React. Каким было бы обходное решение для этого? Спасибо!

Ответ №1:

Возможно, вы выполняете обновление состояния при рендеринге или после извлечения данных из API. Вот что может вам помочь.

   var rc = React.createClass({

componentDidMount(){
          // Write AJAX Code here
          }

     render() {
          //Avoid any state update here
          return {
               ...
          }
        }
    })