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

【问题标题】：Component won't reload with new data when route parameters change路由参数更改时组件不会重新加载新数据
【发布时间】：2019-02-02 22:03:33
【问题描述】：

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

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

我也尝试用 withRouter 包装我的 UserProfile，但似乎更糟，因为当我刷新页面时不会加载任何数据

App.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();
}

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

实际：url 改变但没有数据重新加载。

【问题讨论】：

所以这里有一些东西。首先，为什么要将当前用户 ID 作为道具传递给<Route/>，它已经可以通过路由道具获得它了？除非您从父级传递的状态一与路线一不同，在这种情况下，“当前”可能不是正确的名称。其次，类似地，为什么要将状态中的 ID 存储在 <Route/> 组件中？已经在props里了，为什么要复制到状态中呢？
第三，您不应该手动调用生命周期方法。如果componentWillMount 中有东西你想在获得新道具时再次调用，请将其放在单独的组件方法中，然后在componentWillMount 和中调用它，当新道具进来时。你能添加你的<Route/> 组件代码，可能在沙箱 MVE 中。
@Jayce444 ah currentUserId 是当前登录的用户，因此不一定是您要查看的配置文件的用户 ID。是的，调用生命周期方法对我来说也很奇怪，我刚刚在一些 StackOverflow 帖子中看到了它，所以我想让我们试试吧，哈哈。我会把事情分解成一个单独的方法，谢谢！还有你所说的 MVE 是什么意思？

标签： reactjs react-router react-router-dom

【解决方案1】：

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

您可能应该使用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 });
      })
  }
}

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

【讨论】：

感谢您的回复！将实现 fetchUserData 类型的方法。
这最终对我有用。制作了一种新方法，我将在其中传递新 ID 并设置新状态。 :D
应该是：componentDidUpdate(prevProps) { if (prevProps.match.params.id !== this.props.match.params.id) { ...