React报错：Cannot read property 'lessons' of null问题求助

嘿，我来帮你搞定这个问题！你碰到的Cannot read property 'lessons' of null错误主要有俩核心原因，咱们一步步来修复：

React类组件如果不在constructor里手动初始化state，this.state默认是null——这时候你在render里直接访问this.state.lessons，可不就会抛出“读取null的lessons属性”的错误嘛！

先给state加个初始值，把lessons默认设为空数组：

constructor(props) {
  super(props);
  this.state = {
    lessons: []
  };
}

API.getAllLessons()肯定是个异步操作（比如基于fetch/axios的请求），它返回的是一个Promise对象，不是直接的课程数据。你现在直接把这个Promise赋值给lessons，不仅存的不是真实数据，还会导致state更新时机不对。

你得等异步请求完成、拿到真实数据后再更新state，两种写法都可以：

写法一：用.then()处理Promise #

componentDidMount() {
  API.getAllLessons()
    .then(lessonsData => {
      // 拿到数据后再更新state
      this.setState({ lessons: lessonsData });
    })
    .catch(error => {
      // 别忘了处理请求失败的情况，方便排查问题
      console.error('获取课程数据失败:', error);
    });
}

写法二：用async/await（更直观） #

async componentDidMount() {
  try {
    const lessonsData = await API.getAllLessons();
    this.setState({ lessons: lessonsData });
  } catch (error) {
    console.error('获取课程数据失败:', error);
  }
}

还有个小细节，React要求列表渲染时每个子元素都要有唯一的key属性，不然会触发警告。你可以用课程的唯一标识（比如id）作为key：

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

这样改完之后，你的代码应该就能正常渲染课程列表啦！

内容的提问来源于stack exchange，提问作者Richard Payne