javascript - React.js，无法读取null的属性“教训”

在我的代码中，我告诉API从componentDidMount()内的端点检索数据。

componentDidMount() {
    this.setState({
      lessons: API.getAllLessons()
    })
  }

然后，我将列表中的每个项目映射到渲染器中的单个面板

render() {
    return (
    this.state.lessons.map((lesson)=>{
        <LessonItem lesson={lesson}/>
    })
    );
  }

但是，在映射时会抛出错误，因为该属性在尝试映射的状态下为null，但不应从API返回数据时返回。


  未捕获（承诺中）TypeError：无法读取null的属性“课程”


我的状态定义如下

export interface AuthenticatedHomeState {
  currentUser: any;
  lessons: any;
}

最佳答案

您可能没有初始化状态。

constructor(props){
  super(props)

  this.state = {
    lessons: [] //default value
  }
}

componentDidMount() {
    this.setState({
      lessons: API.getAllLessons()
    })
}

但是，如果API.getAllLessons返回Promise，则需要以不同的方式处理它。

关于javascript - React.js，无法读取null的属性“教训”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50028801/