Зачем реагировать на жизненный цикл работы всего несколько раз

Question

У меня проблема с реакцией, и я долго не могу с этим разобраться.

Я не могу понять, что произошло.

Какой сценарий: Мое приложение использует React и Redux. Я держу все свое состояние в редуксе.

Я установил некоторое состояние dataRefreshed в состояние редукции для обработки страницы повторного рендеринга при обновлении данных из API.

Я использую componentWillReceiveProps метод жизненного цикла.

в моем избыточном состоянии

let initialState = {
   dataRefreshed: false
}

при запуске моего запроса, в избыточном

case START_REQUEST:
      return {
        ...state,
        dataRefreshed: false
      };
case SUCCESS_REQUEST:
      return {
        ...state,
        dataRefreshed: true
      };

Итак, в моем компоненте, когда я делаю запрос и получаю из API новые данные:

 componentWillReceiveProps(nextProps) {
    if (nextProps.Reducer.dataRefreshed) {
      apiCall();
    }
  }

, так что если подумать с логикой:

1 - когда мой запрос запускается и запрос получает статус в порядке, мой dataRefreshed имеет значение true

2- и здесь nextProps.dataRefreshedи this.props.dataRefreshed не равно.

До сих пор все работает хорошо. Мое состояние работает и apiCall () выполнено.

, но apiCall функция запущена 10 раз

, почему мое состояние переключается один раз, поэтому мое состояние переключается в true из false. Но изнутри моя функция вызывает миллион раз.

Я не могу понять, в чем здесь логика.

Я всерьез думаю, что живая реакция из-за этого

Answer 1

Разве это не то, что он делает это скрученным. Проблема в методе componentWillReceiveProps, поэтому реагируйте на удаление, чтобы избежать подобных вещей

Answer 2

Вот что на самом деле делает ваш код:

1. set dataRefreshed = true
2. изменение реквизита триггера
3. вызов apiCall () (причина dataRefreshed == true)
4. START_REQUEST: установка dataRefreshed = false
5. изменение реквизита триггера (ничего не приводит к dataRefreshed == false)
6. apiCall получил ответ от сервера,
7. SUCCESS_REQUEST:установка dataRefreshed = true
8. Перейти к 2 (бесконечный цикл)

Вы должны ввести некоторый флаг, например mustRefresh, который будет установлен в значение false после получения данных и не будет автоматически возвращаться в значение trueесли это не предназначено.