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

【问题标题】：Cannot read property of null - react.js state无法读取 null 的属性 - react.js 状态
【发布时间】：2018-06-24 13:49:25
【问题描述】：

我正在尝试使用 React 和 Firebase 制作一个待办事项列表应用程序。

这是一个单页应用程序（登录除外）。在我的 Page 的组件中，我调用了 List 的组件。在我的列表组件中，我得到了我放入状态的 firebase 数据。在 React Dev Tool 中，在我的 List 组件中，我可以看到这样的状态：

list{items{...},listName:"exemple"}

所以，在我的回报中，我试图显示 listName 的值是这样的：{this.state.list.listName} 但我有以下错误：：无法读取属性'listName' of null

这是我的列表组件：

  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>
    );
  }
}

我哪里错了？

谢谢

【问题讨论】：

标签： reactjs firebase setstate

【解决方案1】：

原因是当你的组件第一次挂载时，状态列表为空。只有当异步 firebase 响应返回时，它才会加载数据并变为非 null。解决方案是检查它是否为空，因此在您的render() 函数中更改此部分：

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

到这里：

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

一般来说，最好在访问对象的属性之前检查对象是否已定义。尤其是您在某些时候明确定义为 null 的那些。

【讨论】：

不用担心。如果您的问题得到解决，请将答案标记为正确:)