一直在尝试导入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。
在此处输入图像描述
检查您的代码,您可以注意到状态var被称为"eventos",并且您正在通过"this.state.events"进行映射。只是一个拼写错误。
您有几个问题:
- 您的
parseEventsData
中似乎有拼写错误。在其他任何地方你都称它为eventos
,但在这里你却称之为events
。不确定您想要哪一个,但不匹配意味着您对setState
的调用设置的属性与稍后在parseEventsData
中引用的属性不同 - 假设您修复了上面的拼写错误,
this.state.eventos
一开始将是未定义的,并且在构造函数中的promise解析之前不会被定义。当您调用this.state.eventos.map
时,您正在对一个未定义的值调用map,正如您的错误所示。在调用map
之前,您需要检查它是否未定义,或者应该将它初始化为一个空数组