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

Question

一直在尝试导入一个 Json 文件，然后在 React Native 应用程序中探索和显示它。 我只是在学习 React Native，同时也在学习 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>

    );
}

}

接下来是 Json。

在此处输入图片说明

这是我得到的错误。

在此处输入图片说明

我只是在学习 React Native，同时也在学习 Javascript。

在此处输入图片说明

Answer 1

检查您的代码，您会注意到状态变量称为“eventos”，并且您正在通过“this.state.events”进行映射。 只是一个错字。

Answer 2

你有几个问题：

1. 您的parseEventsData似乎有拼写错误。 在其他任何地方都称为eventos ，但在这里称为events 。 不确定您打算使用哪个，但不匹配意味着您对setState的调用设置的属性与您稍后在parseEventsData引用的属性不同。
2. 假设您修复了上面的错字， this.state.eventos将是未定义的，并且直到您在构造函数中的承诺解决时才会被定义。 当您调用this.state.eventos.map ，您是在一个未定义的值上调用 map ，正如您的错误所指示的那样。 您需要在调用map之前检查它是否未定义，或者您应该将其初始化为空数组。