重定向时重新初始化类

小编典典

重定向时重新初始化类

reactjs

我目前在 http://example.com/parentdir/module/2/

此URL实际上按照以下路由指示加载Module.js类：

<Route exact path={"/parentdir/module/:id"} component={Module} />

这包含在index.js文件中定义的<BrowserRouter>和<Switch>元素中。

Module类具有constructor和componentWillMount方法。这些设置了记录2的初始详细信息和装入信息。到目前为止一切正常。

现在，我的问题是，在Module.js的孙组件中，我使用以下Redirect重定向到另一个页面，例如第3页：

return (
        <Redirect to="/parentdir/module/3/" />
)

构造函数或componentWillMount无法运行，因此记录＃3无法正确加载。这是因为该记录从加载记录2开始就已经加载到内存中了吗？重新加载Module.js以便正确加载记录＃3的最佳方法是什么？我是否必须以某种方式重新初始化类？还是我必须以某种方式将孙子组件中的数据传递回模块类？后一种方法似乎很乏味。

只是为了澄清一下，如果我直接转到地址栏中的 http://example.com/parentdir/module/3，则一切正常，但是如果我在ReactJS环境中重定向到该相同地址，则它将无法正常工作。

更新资料

到目前为止，我的问题有两个答案。一种解决方案建议使用componentWillReceiveProps。另一种解决方案建议将一种方法作为道具传递给孩子，然后传递给孙子。使用这些方法是否各有利弊，还是只是偏爱？

阅读 333

2020-07-22

共1个答案

小编典典

将id被作为一个传递prop的形式this.props.params.id，所以你应该使用componentWillReceiveProps它运行每次生命周期方法，props而这一点正是你的情况发生了变化。

componentWillMount当您从导航/parentdir/module/2到/parentdir/module/3组件时，该方法将不会运行mounted。它仅在您从其他组件导航时运行（例如，当您直接进入时）。

在您的Module组件中添加此生命周期方法

componentWillReceiveProps(nextProps){
      if(nextProps.params.id != this.props.params.id){
          //load information etc (whatever you are doing in componentWillMount)
       }
}

发生的事情是，当它收到较新的一组参数时props，将比较参数id是否已更改（所有路由参数都存在于中的params对象中props），并在看到有更改时执行逻辑。比较并不是真正必要的，您可以按原样添加方法中的逻辑，componentWillReceiveProps但是这样做效率低下，因为每次props对象更改时都会调用它（可能根本不是id参数）。

2020-07-22