reactjs - 切换路由后 React 路由器 componentDidMount 不执行

Question

我正在创建一个使用 react-router 在页面之间导航的 React Web 应用程序。其中一些页面取决于您导航到该页面时运行的 componentDidMount。但是，除非我刷新页面，否则这似乎不会运行，这对用户来说似乎非常违反直觉。

有没有办法强制 componentDidMount 在 render 方法完成时运行。

很抱歉，如果这被视为一个重复的问题，但我所看到的一切都没有帮助我理解如何解决这个问题。

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 />
}} />

向下传递一个函数，它将向上传递来自 child 的变量

一种不那么肮脏的方法，假设您希望代码可以访问此父组件上的某些内容，就是将一个函数传递给该组件。同样，您必须为此使用 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(...))，您可以在 NewComponent< 的 componentDidMount 上运行该函数 - 不在此父组件上。如果您需要访问该组件的状态、 Prop 等，这将允许您将变量传递给父组件。

如果您需要这样做，建议您这样做

一个更简洁的方法是使用 Redux 状态来传递值，但是(完全恭敬地)在你破坏 Redux 之前先了解 React 生命周期(但你应该破坏 Redux!)