Question

我正在使用react-router创建一个React Web应用程序以在页面之间导航。其中一些页面取决于您导航到该页面时正在运行的componentDidMount。但是，除非刷新页面，否则似乎无法运行。

也许可以在render方法完成时强制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-仅由Route（及其子级）渲染的组件将在路线更改时重新渲染。

我要作一些假设。一个是您要使用的componentDidMount位于不是您的Route组件之一的子组件上。

我要做出的第二个假设是，您不需要在那个组件安装时运行，而是在新路线的一个组件安装时运行。

可能需要在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 />
}} />

传递一个函数，该函数将从子代传递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的{{1}}上运行-不在此父组件上运行。如果需要访问组件的状态，道具等，这将允许您将vars传递给父组件。

推荐，如果需要的话

一种更清洁的方法是使用Redux状态传递值，但是（完全尊重地）在违反Redux之前先了解一下React生命周期（但应该违反Redux！）

切换路由后

1 个答案: