我正在尝试使用React和Firebase制作待办事项列表应用程序。
这是一个单页应用程序(登录除外)。 在页面的组件中,我调用了列表的组件。 在列表的组件中,我获得了放入状态的Firebase数据。 在React Dev Tool的List组件中,我可以看到这样的状态:
list{items{...},listName:"exemple"}
因此,作为回报,我试图显示listName的值,例如:{this.state.list.listName}
但是我遇到以下错误::无法读取null的属性'listName'
这是我的列表的组成部分:
class ListPage extends Component {
constructor(props) {
super(props);
this.state = {
list: null,
};
}
componentDidMount() {
this.listRef = db.ref(`users/${this.props.user.uid}/lists
${this.props.cle}`);
this.listRef.on('value', data=>{
this.setState({
list: data.val()
})
})
}
render() {
return (
<div>
<h1>List : {this.state.list.listName}</h1>
</div>
);
}
}
我错了吗?
谢谢
答案 0 :(得分:2)
原因是因为首次安装组件时,状态列表为空。仅当异步Firebase响应返回时,它才会加载数据并且变为非null。解决方案是检查它是否为空,因此在您的render()
函数中更改此部分:
<h1>List : {this.state.list.listName}</h1>
对此:
{ this.state.list && <h1>List : {this.state.list.listName}</h1> }
通常,最好在访问对象的属性之前检查它们是否已定义。尤其是您已经明确定义为空的那些。