Question

我已经注意到，当我在/ users /：id1链接上尝试进入新的用户个人资料页面/ users /：id2时，它不会重新加载我要尝试的新用户ID的数据转到，但是如果我来自/ forums或/ search

等其他页面，它将很好地加载

我已经尝试过componentWillReceiveProps，但是我不确定我是否正确实施了该方法，并且也不知道现在是否可以安全使用b / c，所以现在可能不推荐使用它。 / p>

我也尝试过用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();
}

预期：一个链接到另一个用户简档上点击时，它重定向到新的用户简档与该新的用户简档的数据

实际：网址会更改，但不会重新加载数据。

Answer 1

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

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

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

此外，请勿手动触发生命周期方法（如注释中所述）

路线参数更改时，组件不会重新加载新数据

1 个答案: