How to output data from AsyncStorage + state (TypeError: undefined is not a function (near '..._this.state.noteList.map...'))?

Question

JavaScript

Hello. The question is in the title. Source code here or below: https://pastebin.com/0JnA6D5b

import React from "react";
import {
  StyleSheet,
  View,
  ScrollView,
  Button,
  Text,
  AsyncStorage
} from "react-native";
 
export default class Home extends React.Component {
  static navigationOptions = {
    title: "Название приложения"
  };
 
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      noteList: []
    };
  }
 
  displayNoteList = () => {
    return this.state.noteList.map(note => {
      return (
        <View>
          <Text>{note.id}</Text>
        </View>
      )
    })
  }
 
componentDidMount() {
 
    AsyncStorage.getItem('noteList', (error, result) => {
      if (!error) {
        if (result !== null) {
          this.setState({ noteList: result })
        }
      }
    })
  }
 
render() {
    return (
        <View>
            { this.displayNoteList() }
        </View>
    );
  }
}

Answer 1

Since AsyncStorage is asynchronous, most likely your displayNoteList method is trying to render something that note.id doesn't have.