WithRouter не может работать в componentDidUpdate

Краткий код вроде этого.

componentDidUpdate(preProps) {
  if ( preProps.somethingFeedback === 'whatINeed') {
    this.props.feedbackReducer()
    this.props.toggleExitAnimation()
    this.timeoutHandle = setTimeout(() => {
      this.props.history.push('path')
    }, 1000)
  }
}

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

Компонент обернут соединением response-redux, вложенным в функцию withRouter hoc response-router.

Я нашел исходный код, функция feedbackReducer вызовет автоматическую маршрутизацию. если я прокомментирую функцию feedbackReducer, this.props.history.push работать не будет.

РЕДАКТИРОВАТЬ

Проблема решается приведенным ниже кодом.

componentDidUpdate(preProps) {
  if ( preProps.somethingFeedback === 'whatINeed') {
    this.props.toggleExitAnimation()
    this.timeoutHandle = setTimeout(() => {
      this.props.feedbackReducer()
      this.props.history.push('path')
    }, 1000)
  }
}

На мой взгляд, у feedbackReducer есть ключевая обратная связь для запуска маршрутизации, поэтому время ожидания должно истекать вместе с history.push.

Вы проверили, доступен ли this.props.history внутри функции тайм-аута?

Laurenz Glück 24.08.2018 14:51

Я добавляю console.info в функцию тайм-аута, исходный код не может регистрировать сообщение, но может быть перенаправлен. Напротив, если я прокомментирую feedbackReducer.

ccd 24.08.2018 15:10

Что выводит console.info(this.props.history); внутри функции тайм-аута?

Laurenz Glück 24.08.2018 15:12

История показывает правильный путь, компонент маршрута все еще не изменен.

ccd 24.08.2018 15:16

как использовать withRouter Hoc в операторе экспорта?

Kyaw Siesein 24.08.2018 15:21

Хорошо, я немного запутался ... Для ясности: код работает, если вы закомментируете this.props.feedbackReducer()? Если да, то что делает this.props.feedbackReducer()? Можете выложить код функции feedbackReducer?

Laurenz Glück 24.08.2018 15:21

Спасибо, что заметили этот момент, у feedbackReducer есть ключевой отзыв о маршруте, если он комментирует, маршрутизация не может работать. Код должен тайм-аут обратной связи с помощью history.push вместе.

ccd 24.08.2018 15:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
304
0

Другие вопросы по теме