Question

我正在尝试将来自 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>;
  }
}

Answer 1

试试这个代码：

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 状态，这就是 {{1} 的实际状态} 从未更新过，因此将 username 替换为 message 有帮助，现在 username 状态已正确更新。我建议使用 firebase 侦听器来更新用户信息。

在来自 firebase 的 react 组件中显示用户名

1 个答案: