React HOC компонент вызывает асинхронное действие, запускаемое дважды с помощью componentWillMount?

У меня есть этот фрагмент кода

export default function CheckHasSentGift(TransformedComponent) {
  @connect(state=>state.global,{fetchGift})
   class WithRedirect extends Component {
    componentWillMount() {
      this.props.fetchGift('sent')
    }

    render() {
      this.props.sentGiftId && 
      !this.props.location.pathname.includes('sent') && 
      return <Redirect to = {`/app/gift/${this.props.sentGiftId}/sent`} />

      return <TransformedComponent { ...this.props } />
    }
  }

  return WithRedirect
}

и это мой маршрут

<Route exact path='/app' component = {CheckHasSentGift(App)} />

У меня нет проблем с перенаправлением, это сработало, но я увидел 2 вызова fetchGift api на своей вкладке сети. Затем я отлаживаю, делая это в методе рендеринга

render() {
  //this.props.sentGiftId && 
  //!this.props.location.pathname.includes('sent') && 
  //return <Redirect to = {`/app/gift/${this.props.sentGiftId}/sent`} />

  console.info('check render')

  return <h1>test</h1>
  //return <TransformedComponent { ...this.props } />
}

И рендеринг выполняется только один раз, почему же componentWillMount может срабатывать дважды после перенаправления?

Я думаю, что эта проблема конкретно решается здесь группой реагирования: reactjs.org/docs/react-component.html#unsafe_componentwillmo‌ unt. А также здесь: reactjs.org/blog/2018/03/27/update-on-async-rendering.html. Я думаю, что в идеале нужно делать асинхронные вызовы в методе конструктора.

kaushik94 01.04.2018 04:39
Поведение ключевого слова "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) для оценки ваших знаний,...
2
1
490
1

Ответы 1

На самом деле componentWillMount устарел, начиная с React.v16.3, и лучше использовать componentDidMount, чтобы начать выборку данных.

And the render only render once, how come the componentWillMount can fire twice after the redirected?

Поместите свой console.info в componentWillMount, чтобы увидеть, вызывается ли он дважды.

Также убедитесь, что первый запрос не является предполетный запрос (метод OPTIONS), который браузер запустит для описания связи между сервером. Вы можете проверить это на вкладке «Сеть» в инструментах разработчика браузера.

Пробовал componentDidMount, запускался дважды, затем я вставлял конструктор, работал нормально. componentDidMount срабатывает после первого вызова рендеринга, зачем использовать его для асинхронного вызова?

Jamie Aden 01.04.2018 15:30

@JamieAden трудно сказать, почему этот компонент создается дважды, не имея полного примера. В документации говорится, что это лучшее место для запуска асинхронного вызова. componentWillMount может привести к некоторым утечкам памяти (например, он вызывается при рендеринге на стороне сервера).

Tomasz Mularczyk 01.04.2018 15:50

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