Как использовать обещание с map () в реагировать родной

Question

Я новичок в React Native и изучаю его.Я хотел бы использовать Promise с map (), он не очень чистый для меня, и у меня есть ошибка:

"Ошибка типа: Ошибка типа: undefined не является объектом (оценивая это).courses.map ') "

в ExploreScreen

interface IProps {
  navigation: NavigationScreenProp<any, any>;
}

interface IState {
  lessons: ILesson | [];
}

export class ExploreScreen extends Component<IProps, IState> {    
  constructor(props: any) {
    super(props);
    this.state = {lessons: []}
  }
  public async componentDidMount() {
    this.setState({lesson: await ExploreData.getData()});
  }   
  public render() {
    let block
    if(this.state.lessons === null) {
      block = <View><Text>Loader</Text></View>;
    } else {
      block = (
        <ScrollView>
          {this.lessons.map((lesson: ILesson) => (
            <LessonListItem
              key={lesson.id}
              lesson={lesson}
            />))}
        </ScrollView>
      );
    }
    return (
      <View>
        {block}
      </View>
    );
  }
}

В ExploreData

export class ExploreData extends CoreData {
  public static async getData(id: string): Promise<ILesson[]>{
    await ExploreData.wait();
    const data = [];
    for (let i = 0; i < 25; i++) {
      data.push(CoreData.getLesson());
    }
    return data;
  }
  private static wait(): Promise<{}> {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve(), 2000);
    });
    return promise;
  }
}

Если кто-то может мне помочь, это было бы очень приятно.Спасибо

Answer 1

В вашем коде есть несколько опечаток:

export class ExploreScreen extends Component {    

  public async componentDidMount() {
    // Typo here:
    this.setState({lessons: await ExploreData.getData()});
  }   
  public render() {
    let block
    if(this.state.lessons === null) {
      block = <View><Text>Loader</Text></View>;
    }else{
      block=(<ScrollView>
      {
      // Typo here:
      this.state.lessons.map((lesson: ILesson) => (
        <LessonListItem
          key={lesson.id}
          lesson={lesson}
        />
        ))
      }
    </ScrollView>
      );
    }
    return (
      <View>
        {block}
      </View>
    );

  }
}

Answer 2

Как отмечали другие this.lessons должно быть this.state.lessons