Блог

Главная - Вопросы по программированию - отображение имени пользователя в компоненте react из firebase

отображение имени пользователя в компоненте react из firebase

# #javascript #reactjs #firebase

Вопрос:

я пытаюсь отобразить имя пользователя из firebase в виде тега с именем, чтобы показать, как пользователь вошел в систему, выполнив поиск по их идентификатору. меня прочитали и сказали, что в компонентах не должно быть асинхронности, поэтому я устал следовать следующему коду. однако, похоже, он не обновляется, он правильно отображает имя в журнале, но может быть неверного типа. кто-нибудь знает, в чем проблема с этим? является ли этот подход вообще правильным?

 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>;
  }
}

Комментарии:

1. Проблема заключается в следующем утверждении: this.setState({ message: username }); Вы добавляете имя пользователя в поле сообщения, а не имя пользователя… это опечатка

Ответ №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 состояние, и именно поэтому фактическое состояние username никогда не обновлялось, поэтому замена message на username состояние «помог» и «теперь username » должным образом обновляется. Я бы предложил использовать прослушиватель firebase для обновления информации о пользователе.

Метки: