У меня есть этот фрагмент кода
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 может срабатывать дважды после перенаправления?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


На самом деле 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 срабатывает после первого вызова рендеринга, зачем использовать его для асинхронного вызова?
@JamieAden трудно сказать, почему этот компонент создается дважды, не имея полного примера. В документации говорится, что это лучшее место для запуска асинхронного вызова. componentWillMount может привести к некоторым утечкам памяти (например, он вызывается при рендеринге на стороне сервера).
Я думаю, что эта проблема конкретно решается здесь группой реагирования: reactjs.org/docs/react-component.html#unsafe_componentwillmo unt. А также здесь: reactjs.org/blog/2018/03/27/update-on-async-rendering.html. Я думаю, что в идеале нужно делать асинхронные вызовы в методе конструктора.