Реагирует, что компонент componentDidMount маршрутизатора не выполняется после переключения маршрута

Question

Я создаю реагирующее веб-приложение, использующее реагирующий маршрутизатор для навигации по страницам. Некоторые из этих страниц зависят от запуска 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()})
    }

Answer 1

tl; dr - только компоненты, представленные маршрутом (и их дочерние элементы), будут повторно отображаться при изменении маршрута.

Я собираюсь сделать несколько предположений. Во-первых, componentDidMount, который вы пытаетесь использовать, находится на компоненте, который не является дочерним по отношению к одному из ваших компонентов Route.

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

Функция 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 />
}} />

Передайте функцию, которая будет передавать переменные от ребенка

Менее грязный способ, и при условии, что вы хотите, чтобы код имел доступ к чему-либо в этом родительском компоненте, состоял бы в передаче функции компоненту. Опять же, вы должны использовать 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 - НЕ на этом родительском компоненте. Это позволит вам передавать переменные до родительского компонента, если вам нужен доступ к состоянию этого компонента, реквизитам и т. Д.

Рекомендуется, если вам нужно это сделать

Гораздо более чистый способ сделать это - использовать состояние Redux для передачи значений, но (вполне уважительно) разобраться с жизненными циклами React, прежде чем нарушать Redux (но вы ДОЛЖНЫ нарушать Redux!)