时间戳

首页 > 解决方案 > 路由参数更改时组件不会重新加载新数据

reactjs - 路由参数更改时组件不会重新加载新数据

问题描述

我注意到，当我在 /users/:id1 链接上尝试访问新的用户个人资料页面 /users/:id2 时，它不会重新加载我要访问的新用户 ID 的数据，但是如果我来自 /forums 或 /search 等其他页面，它将加载正常

我已经尝试过componentWillReceiveProps，但我不确定我是否正确实施了它，也不知道它是否可以安全使用 b/c 现在可能已弃用？？？

我也试过用 withRouter 包装我的 UserProfile 但似乎更糟，因为当我刷新页面时没有数据加载

应用程序.js

<BrowserRouter onUpdate={() => window.scrollTo(0, 0)} >
    <div>
        <Switch>
            <Route exact path="/search" component={Search}/>
            <Route exact path="/forum" component={Forum}/>
            <Route exact path="/user/:id" component={UserProfile} currentUserId={this.state.currentUserId}/>
        </Switch>
    </div>
</BrowserRouter>

我的链接看起来如何

<Link className="pt-button pt-minimal" to={"/user/"+this.props.currentUserId}>My Profile</Link>

我对 componentWillReceiveProps 的尝试

if (nextProps.match.params.id !== this.props.match.params.id) {
    this.setState({

        userId: nextProps.match.params.id,

    })
    this.componentWillMount();
}

预期：单击指向另一个用户配置文件的链接时，它会重定向到具有该新用户配置文件数据的新用户配置文件

实际：网址更改但没有数据重新加载。

标签： reactjsreact-routerreact-router-dom

解决方案

我认为您非常接近，但是误解生命周期方法以及何时/如何调用它们会导致一些问题。

您可能应该使用componentDidUpdate. 我也会避免将道具存储在状态中，因为它们需要保持同步。

componentDidUpdate(prevProps) {
  if (prevProps.match.params.id !== this.props.match.params.id) {
    this.setState({ user: null });
    fetchUserData(this.props.match.params.id)
      .then((user) => {
        this.setState({ user: user });
      })
  }
}

另外，不要手动触发生命周期方法（如评论中所述）

推荐阅读