javascript - TypeError:undefined 不是评估 this.state.items 的对象
问题描述
我是 React native 和一般开发的新手,我正在尝试从 web 服务中检索数据然后渲染它,但我似乎遇到了不同的错误。
我收到此错误
import React, { Component } from "react";
import {StyleSheet,View,ActivityIndicator,FlatList,Text,TouchableOpacity} from "react-native";
export default class Source extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: "Source Listing",
headerStyle: {backgroundColor: "#fff"},
headerTitleStyle: {textAlign: "center",flex: 1}
};
};
constructor(props) {
super(props);
this.state = {
loading: false,
items:[]
};
this.fetchRequest=this.fetchRequest.bind.this
}
FlatListItemSeparator = () => {
return (
<View style={{
height: .5,
width:"100%",
backgroundColor:"rgba(0,0,0,0.5)",
}}
/>
);
}
componentDidMount()
{
fetchRequest();
}
renderItem=(data)=>
<TouchableOpacity style={styles.list}>
<Text style={styles.lightText}>{data.item.name}</Text>
<Text style={styles.lightText}>{data.item.email}</Text>
<Text style={styles.lightText}>{data.item.company.name}</Text>
</TouchableOpacity>
render(){
fetchRequest()
{
const parseString = require('react-native-xml2js').parseString;
fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master')
.then(response => response.text())
.then((response) => {
parseString(response, function (err, result) {
console.log(response)
});
}).catch((err) => {
console.log('fetch', err)
this.fetchdata();
})
if(this.state.loading){
return(
<View style={styles.loader}>
<ActivityIndicator size="large" color="#0c9"/>
</View>
)}}
return(
<View style={styles.container}>
<FlatList
data= {this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem= {item=> this.renderItem(item)}
keyExtractor= {item=>item.id.toString()}
/>
</View>
)}
}
<FlatList
data={this.state.items}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor= {item=>item.id.toString()}
/>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
loader:{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
list:{
paddingVertical: 4,
margin: 5,
backgroundColor: "#fff"
}
});
我想要实现的主要原因是渲染从 web 服务返回的“项目”。
请指导我解决这个错误
解决方案
推荐阅读
- javascript - 在 React 中,如何使用复选框创建一个灵活的选定项目数组,类似于在我的手机上选择图像?
- c# - 当游戏窗口没有使用 Unity 输入系统聚焦时,如何避免输入检测?
- python - 必须以什么格式发送 ICE 候选人以在两个对等方之间建立连接?
- java - 这是否是动态多态性?
- html - Twitter bootstrap flex 垂直中心不能使用 align-self-center
- python - psycopg2 copy_from--忽略标题?
- docker - Docker 构建错误 :: exec: \"/bin/sh\": stat /bin/sh: no such file or directory
- vue.js - vue js表达式中的算术
- acumatica - 仅在输入选择器时(在打开选择器网格之前),如何使所有选择器字段可搜索?
- java - 有没有办法在 RESTful API 中过滤或排序数据?