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

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

这是一个单页应用程序（除了登录）。 在页面的组件中，我调用列表的组件。 在我的列表组件中，我获取了我的firebase数据，并将其置于状态。 在React-Dev工具的列表组件中，我可以看到如下状态：

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

类列表页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
列表：空，
};
}
componentDidMount（）{
this.listRef=db.ref（`users/${this.props.user.uid}/lists
${this.props.cle}`）；
this.listRef.on（'value'，data=>{
这是我的国家({
列表：data.val（）
})
})
}
render（）{
返回(
列表：{this.state.List.listName}
);
}
}

我错在哪里

---

感谢

原因是当您的组件首次装载时，状态列表为空。只有当异步firebase响应返回时，才会加载数据并变为非null。解决方案是检查它是否为null，因此在

render（）

函数中更改此部分：

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

List:{this.state.List.listName}

为此：

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

{this.state.list&&list:{this.state.list.listName}

---

通常，最好在访问对象的属性之前检查对象是否已定义。尤其是那些您明确定义为在某个点为null的组件。

原因是当您的组件首次装载时，状态列表为null。只有当异步firebase响应返回时，才会加载数据并变为非null。解决方案是检查它是否为null，因此在

render（）

函数中更改此部分：

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

List:{this.state.List.listName}

为此：

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

{this.state.list&&list:{this.state.list.listName}

---

通常，最好在访问对象的属性之前检查对象是否已定义。尤其是那些您明确定义为在某个点为空的值。

不用担心。如果您的问题已解决，请将答案标记为正确：）无需担心。如果您的问题已解决，请将答案标记为正确：）