尝试从 API 列出用户偏好，得到"TypeError：null 不是对象(评估'firebase.auth().currentUser.uid')

Question

我正在创建一个应用程序(React Native)，它连接到API，并允许用户将从API接收的对象添加到其首选项中。我已经按照本教程进行操作，但我收到黄色警告"可能未处理的承诺Rejsction(id：0)：TypeError：null不是对象(评估'firebase.auth().currentUser.uid')。数据正在添加到数据库中，但未在我的应用程序中列出(显示)。

主页.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;

应用.js

import * as firebase from 'firebase';
firebase.auth().signInWithEmailAndPassword("[e-mail]","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时，你是在null上调用uid。

解决此问题的简单方法是在调用firebase.auth().currentUser后始终检查null。所以：

currentUser = firebase.auth().currentUser
if (currentUser != null) {
var that = this
firebase.database().ref(user.uid).child('plantList').on('child_added',function(data){
...

请注意，我还删除了firebase.auth().currentUser之前await。由于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 会在身份验证状态更改时调用您的代码，这是执行依赖于身份验证状态的操作的最佳时机，例如(在您的情况下)侦听该用户的数据)。