无法读取null属性-react.js状态

时间:2018-06-24 13:49:25

标签: reactjs firebase setstate

我正在尝试使用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>
    );
  }
}

我错了吗?

谢谢

1 个答案:

答案 0 :(得分:2)

原因是因为首次安装组件时,状态列表为空。仅当异步Firebase响应返回时,它才会加载数据并且变为非null。解决方案是检查它是否为空,因此在您的render()函数中更改此部分:

<h1>List : {this.state.list.listName}</h1>

对此:

{ this.state.list && <h1>List : {this.state.list.listName}</h1> }

通常,最好在访问对象的属性之前检查它们是否已定义。尤其是您已经明确定义为空的那些。