Как обновить компонент без обновления / перезагрузки в response-native, когда мы получаем / обновляем данные из firebase?

Question

Я обновляю некоторые данные в коллекции firebase из компонента A в моем собственном приложении React. Например, я обновляю параметр имени в коллекции X в базе данных. Обновление имени выполняется из компонента A. Компонент B получает имя из той же коллекции X. Но чтобы увидеть изменения в компоненте B, мне нужно перезагрузить приложение или обновить sh приложение еще раз. Но я хочу увидеть изменения, не обновляя sh и не перезагружая приложение.

компонент A

    async setName(){
    await firestore()
    .collection('set_name')
    .doc(auth().currentUser.uid)
    .update({
      name: this.state.name}).then( () => {
        console.log('name updated')
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
}

компонент B

    componentDidMount(){
      this.getName();
    }

    async getName(){
    let name;
    await firestore()
    .collection('set_name')
    .doc(auth().currentUser.uid)
    .get().then(function(doc){
        this.setState({name:doc.data()}))
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
}

Я могу получить данные из firebase в компоненте B, но чтобы увидеть изменения, мне нужно перезагрузить компонент. Но я не хочу перезагружать, чтобы увидеть какие-либо изменения в компоненте B.

Answer 1

Я думаю, вам следует использовать функцию onSnapShot, чтобы получать обновления в реальном времени и устанавливать состояние компонента.

Попробуйте этот способ

Компонент B

componentDidMount(){
   firestore()
    .collection('set_name')
    .doc(auth().currentUser.uid)
    .onSnapshot(function(doc) {
        this.setState({name:doc.data()}))
    });
}

Answer 2

Вам нужно слушать обновления в реальном времени из firestore. Когда вы выполняете запись, ваши слушатели будут уведомлены с новыми данными до того, как данные будут отправлены на бэкэнд. Поэтому вместо использования .get() в компоненте B вы можете изменить функцию следующим образом.

 db.collection('set_name')
    .doc(auth().currentUser.uid)
    .onSnapshot(function(doc) {
       this.setState({name:doc.data()}))
    });