Попытка вывести список предпочтений пользователя из API, получая «TypeError: null не является объектом (оценка 'firebase.auth (). CurrentUser.uid')

Question

Я создаю приложение (React Native), которое подключается к API и позволяет пользователю добавлять объект, полученный из API, в свои предпочтения. Я следовал этому учебнику , но получаю жёлтое предупреждение «Возможное необработанное обещание возврата (id: 0): TypeError: null не является объектом (оценивается как« firebase.auth (). CurrentUser.uid »). Данные добавляются в базу данных, но не отображаются (отображаются) в моем приложении.

Home.js (в котором я хочу, чтобы мои предпочтения были указаны)

import * as firebase from 'firebase';
import {Container, Content, ListItem} from 'native-base';

var data = []
var currentUser

class Home extends React.Component {

constructor(props){
   super(props)

    this.ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !==r2})

    this.state = {
        listViewData : data
    }
}
componentDidMount(){

    this.getPlants()
}

getPlants = async()=>{

    currentUser = await firebase.auth().currentUser

    var that = this

    firebase.database().ref(currentUser.uid).child('plantList').on('child_added',function(data){

        var newData = [...that.state.listViewData]
        newData.push(data)

        that.setState({ listViewData: newData})
    })
}
render(){
 return(
<Container style={{ flex: 1, backgroundColor: 'yellow'}}>
                <Content>
                    <ListView
                        enableEmptySections
                        dataSource = {this.ds.cloneWithRows(this.state.listViewData)}
                        renderRow={data =>

                            <ListItem>
                                <Text> {data.val().namePlant}</Text>
                            </ListItem>
                        }
                    />
                </Content>
            </Container>
     );}
}

export default Home;

App.js

import * as firebase from 'firebase';
firebase.auth().signInWithEmailAndPassword("mail@gmail.com","password")

...

export default class App extends Component {

  constructor (props) {
super(props);

    if (!firebase.apps.length) { firebase.initializeApp(config.FirebaseConfig); }
}
  render() {

    return <AppContainer  />;
  }
}

Plant.js (который печатает данные печати конкретного объекта из API и добавляет их в базу данных)

import * as firebase from 'firebase';

var currentUser
class CatalogPlant extends React.Component {

  addToFavourites = async(scname) =>{

//get current user
currentUser = await firebase.auth().currentUser

//get unique key
var databaseRef = await firebase.database().ref(currentUser.uid).child('plantList').push()

//update plant name at the unique key
databaseRef.set({
  'namePlant': scname

})


  }

// part of code which connects to API and gets the data...

Answer 1

Похоже, ваш пользователь еще не вошел в приложение.В этом случае firebase.auth().currentUser - это null, поэтому, когда вы делаете firebase.auth().currentUser.uid, вы звоните uid на null.

Простой способ исправить это - всегда проверять nullпосле звонка firebase.auth().currentUser.Итак:

currentUser = firebase.auth().currentUser

if (currentUser != null) {
    var that = this

    firebase.database().ref(user.uid).child('plantList').on('child_added',function(data){

    ...

Обратите внимание, что я также удалил await до firebase.auth().currentUser.Поскольку firebase.auth().currentUser не является асинхронной операцией, здесь нет необходимости (и не использовать) await.

Лучшее решение - использовать прослушиватель состояния авторизации, как также показано в этом примере из Документация RNFirebase :

componentDidMount() {
  this.unsubscriber = firebase.auth().onAuthStateChanged((user) => {
    this.setState({ user });
  });
}

Так что в вашем случае это будет означать:

componentDidMount(){
  firebase.auth().onAuthStateChanged((user) => {

    if (user != null) {
      var that = this

       firebase.database().ref(currentUser.uid).child('plantList').on('child_added',function(data){

          var newData = [...that.state.listViewData]
          newData.push(data)

          that.setState({ listViewData: newData})
      })
    }
  })
}

Вход в систему или восстановление состояния аутентификации, когдаприложение перезапускается, это асинхронная операция.Поэтому простой вызов firebase.auth().currentUser может упустить тот факт, что пользователь выполнил вход. Используя onAuthStateChanged, Firebase будет вызывать ваш код при каждом изменении состояния аутентификации, что является идеальным моментом для выполнения действий, зависящих от состояния аутентификации, таких как (в вашем случае) прослушивание данных для этого пользователя).