1

尝试/dashboard在 Firebase 身份验证后查看用户页面，但每次都发生错误。从根和使用<Link to={"/dashboard"}是工作。但直接 url 不起作用。标头调用firebase.currentUser()，但它不能。

错误：

TypeError：无法读取 null 的属性“uid”

编码：

auth.js

class Auth extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (!user) {
        this.props.history.push("/");
      } else {
        this.setState({ loading: false });
      }
    });
  }

  render() {
    return (
      <div>
        {this.state.authenticating ? (
          <div className="loader">
            <Loader loading={this.state.loading} />
          </div>
        ) : (
          this.props.children
        )}
      </div>
    );
  }
}

header.js

class Header extends Component {
  render() {
    const user = firebase.auth().currentUser;
    return (
      <p>{user.uid}</p>
    )
  }
}

dashbboard.js

class Dashboard extends Component {
  render() {
    return (
      <div>
        <Auth>
          <p>Dashboard</p>
        </Auth>
      </div>
    )
  }
}
4

1 回答 1

0

从文档：

注意：currentUser 也可能为 null，因为 auth 对象尚未完成初始化。如果您使用观察者来跟踪用户的登录状态，则无需处理这种情况。

这就是为什么在直接 URL 的情况下它会为您出错，但在其他情况下不会。您可以选择通过有条件地渲染userIdin 标头来解决此问题：

const user = firebase.auth().currentUser;
return user && (
  <p>{user.uid}</p>
)

这是假设 Authentication 的更改将触发从更高组件之一重新呈现组件。正如注释所说，您可以使用onAuthStateChanged回调来确保组件重新呈现。

const userContext = useContext(UserContext);

firebase.auth().onAuthStateChanged(user => {
  // Assuming that it has a setUser function
  userContext.setUser(user);
});

并在 Header 中使用上下文中的值。

上下文文档

于 2020-04-02T11:05:34.407 回答