时间戳

首页 > 解决方案 > 在 firebase 的反应组件中显示用户名

javascript - 在 firebase 的反应组件中显示用户名

问题描述

我试图将来自firebase的用户名显示为排序名称标签，以通过搜索用户的uid来显示用户登录的内容。我被阅读并说组件中不应该有异步，所以我厌倦了使用以下代码。但是它似乎没有更新，它在日志中正确显示了名称，但可能来自错误的类型。有谁知道这是什么问题？这种方法是否正确？

class ShowUsername extends Component {
  constructor(props) {
    super(props);
    this.state = { username: "" };
  }

  async componentDidMount() {
    this.setState({ message: "loading..." });
    const snapshot = await firestore
      .collection("username")
      .where("uid", "==", "EwE8qBqjDhNaceqdFEqdxD5X9zu1")
      .get();
    const doc = snapshot.docs.map((doc) => doc.data());
    const username = doc[0].username;
    console.log(username);
    this.setState({ message: username });
  }

  render() {
    let { username } = this.state;
    return <div>{username}</div>;
  }
}

标签： javascriptreactjsfirebase

解决方案

试试这个代码：

class ShowUsername extends Component {
      constructor(props) {
        super(props);
        this.state = { username: "" };
      }

  async componentDidMount() {
    this.setState({ message: "loading..." });
    const snapshot = await firestore
      .collection("username")
      .where("uid", "==", "EwE8qBqjDhNaceqdFEqdxD5X9zu1")
      .get();
    const doc = snapshot.docs.map((doc) => doc.data());
    const username = doc[0].username;
    console.log(username);
    this.setState({ username: username });
  }

  render() {
    let { username } = this.state;
    return <div>{username}</div>;
  }
}

您应该更新名为 的状态username，没有调用状态，message并且您正在更新该message状态，这就是为什么实际状态username从未更新的原因，因此替换message为usernamehelp 并且现在username状态正在正确更新。我建议使用 firebase 监听器来更新用户信息。

推荐阅读