未捕获的类型错误：无法读取未定义的属性“映射”（REACT NATIVE - Javascript）

Question

Been trying to import a Json file and then explore and display it in a React Native app. I am just learning React Native, and at the same time Javascript.

import React, { Component } from 'react';
import {
    Text,
    View,
    AsyncStorage
} from 'react-native';

import{eventos} from './Events';

export default class Admin extends React.Component{

    constructor(props){
        super(props);
        this.state={
            eventos
        }
        try{
            AsyncStorage.getItem(eventos).then((value)=>{
                if(value!=null){
                    console.log("Events esta completo")
                }else{
                    console.log("Events esta vacio")
                }
                this.setState({
                    eventos:JSON.parse(value)
                })
            })
        }catch(err){
            console.log(err)
        }
    }
parseEventsData(){

        console.log("Deberia salir algo")
        return this.state.events.map((eventos,i)=>{
            return(
                <View key={i}>
                    <Text>
                        {eventos.title}
                    </Text>
                    <Text>
                        {eventos.responsible}
                    </Text>
                    <Text>
                        {eventos.description}
                    </Text>
                </View>
            )
        })
}
render(){
    return(
        <View>
            {this.parseEventsData()}
            <Text>No salio nada</Text>                 
        </View>

    );
}

}

The Json is next.

enter image description here

And this is the error I get.

enter image description here

I am just learning React Native, and at the same time Javascript.

enter image description here

Answer 1

Checking your code, you can notice that the state var is called "eventos" and you are mapping through "this.state.events". Just a typo.

Answer 2

You have a couple of issues:

1. You appear to have a typo in your parseEventsData . Everywhere else you call it eventos , but here you call it events . Not sure which you intend, but the mismatch means that your call to setState is setting a different property than you reference later on in parseEventsData .
2. Assuming you fix the typo above, this.state.eventos will be undefined at first, and won't be defined until your promise in the constructor resolves. When you call this.state.eventos.map , you are calling map on a value that is undefined as your error indicates. You need to either check whether it is undefined before calling map , or you should initialize it to an empty array.