React router componentDidMount не выполняется после переключения маршрута
Я создаю реагирующее веб-приложение, используя реагирующий маршрутизатор для навигации между страницами. Некоторые из этих страниц зависят от запуска компонента componentDidMount при переходе на страницу. Однако кажется, что это не работает, пока я не обновлю страницу, что кажется пользователям очень нелогичным.
Есть ли способ заставить componentDidMount запускаться, когда метод рендеринга, возможно, завершится.
Извините, если это рассматривается как повторяющийся вопрос, но ничто из того, что я видел, не помогло мне понять, как решить эту проблему.
componentDidMount = async () => {
//initialize web3
const web3 = await getWeb3();
// get contract address
const ethAddress = await storehash.options.address
this.setState({ethAddress})
//set account for Blockchain network
this.setState({account: await web3.eth.getAccounts()})
}
Кроме того, если вы выполняете одну и ту же инициализацию для нескольких компонентов, вы можете переместить ее в родительский элемент и передать через реквизиты или переместить логику в Компонент высшего порядка.
событие, которое вы ищете, я думаю, это componentWillReceiveProps .. это будет вызываться каждый раз, когда компонент получает новую опору, и его необходимо повторно визуализировать
Я не отправляю никаких реквизитов на эту новую страницу, я просто хочу запустить какой-то код, когда этот новый маршрут загружается
вы переходите по адресу, который соответствует одному и тому же Route, но имеет разные параметры, верно?
ты это исправил? можешь опубликовать ответ?
Вы можете использовать компонентWillReceiveProps для этого
Ответы 1
tl; dr — только компоненты, визуализированные Route (и их дочерние элементы), будут повторно отображаться при изменении маршрута.
Я собираюсь сделать несколько предположений. Во-первых, componentDidMount, который вы пытаетесь использовать, находится в компоненте, который является нет дочерним элементом одного из ваших компонентов маршрута.
Второе предположение, которое я сделаю, заключается в том, что вам нужно запускать не при монтировании компонента это, а при монтировании одного из компонентов новых маршрутов.
Функция componentDidMount в компоненте, который визуализируется маршрутом, вероятно, там, где вам нужно. Однако, если вам нужно что-то обновить в состоянии этого компонента при монтировании одного из его дочерних элементов, это не поможет. Однако вы можете сделать это несколькими разными способами.
Быстро и грязноНе привыкайте делать это
Если вы просто что-то тестируете, быстрый и грязный метод — использовать свойство render маршрута вместо component.
Так, например, если ваш маршрут выглядит так:
<Route path = "/some-route" component = {NewComponent} />
Вы можете изменить это (опять же... только для быстрого теста, не рекомендуется использовать это в любом производственном коде!)
<Route path = "/some-route" render = {(props) => {
//do your console log or temporary testing stuff here
return <NewComponent ...props />
}} />
Передайте функцию, которая будет передавать vars от ребенка
Менее грязный способ, и если вы хотите, чтобы код имел доступ к чему-либо в этом родительском компоненте, состоял бы в том, чтобы передать функцию компоненту. Опять же, вам придется использовать render для этого:
someFunction = (passedVar) => {
// do something with passedVar, which you'll pass from the new component
}
// ... then in the Router...
<Route path = "/some-route" render = {(props) => <NewComponent ...props onRouteLoaded = {this.someFunction} />}} />
Тогда у вас будет функция (this.props.onRouteLoaded(...)), которую вы можете запустить на componentDidMount из NewComponent, а НЕ на этом родительском компоненте. Это позволит вам передавать vars родительскому компоненту, если вам нужно получить доступ к состоянию этого компонента, реквизитам и т. д.
Рекомендуется, если вам нужно это сделать
Гораздо более чистый способ сделать это — использовать состояние Redux для передачи значений, но (при всем уважении) подумайте о жизненных циклах React, прежде чем нарушать Redux (но вы ДОЛЖНЫ нарушать Redux!)
Componentdidmount запускается только один раз, когда компонент визуализируется. вы можете попробовать использовать другие жизненные циклы.