Question

我有一个React / Redux / Firebase应用程序，我需要在渲染方法之前检查当前用户的用户名，以便我知道是否需要转到数据库并检索其他用户。

但是，由于某些原因我不清楚，我无法在渲染方法之外访问this.props.currentUser。它返回null。

基本上，我想在函数内部访问它。我的代码如下所示：

 componentDidMount() {
  var userURL = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

  if(this.props.currentUser.username !== userURL) {
    this.getDbUser(userURL);
    console.log(userURL);
  }
}

我收到错误

Cannot read property username of null

我可以在render()中正确访问该数据。任何想法如何解决这个问题都会很棒。谢谢！

Answer 1

编辑：实际上 - ComponentDidMount在异步获取之前正在运行。返回，因此currentUser将为null。尝试将ComponentDidMount更改为ComponentWillReceiveProps(nextProps)并替换＆＃39; this.props＆＃39;在您的代码中使用＆＃39; next.props＆＃39;。

ComponentWillReceiveProps内的所有内容都会在您的道具更新后使用“提取的”＆＃39;用户。例如：

 componentWillReceiveProps(nextProps) {
  var userURL = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

  if(nextProps.currentUser && nextProps.currentUser.username !== userURL) {
    this.getDbUser(userURL);
    console.log(userURL);
  }
}

以上代码还包含IF中的&&，因此如果currentUser为null则不会出现错误。

文档：https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

如何在呈现方法之外访问React / Redux当前用户？

1 个答案: