平面视图仅返回空白行

Question

我正在尝试将一个反应原生程序与我们的SQL Server中的一些数据连接起来。 下面是我们的链接返回的 Json 字符串：

[{"Item_ID":2,"first_name":"steve","last_name":"jones","phone":"510-712-1822","email":"[e-mail]","company":"Glass"},{"Item_ID":4,"first_name":"Tina","last_name":"Wills","phone":"510-222-7788","email":"[e-mail]","company":"Glass","notes":"","json":"{fname: "Tina", lname: "Wills", phone: "510-222-7788", email: "[e-mail]", company: "Glass", project: "Portal"}"},{"Item_ID":5,"first_name":"Sleepy","last_name":"owl","phone":"555-555-5555","email":"[e-mail]","company":"Forest","notes":"whoooooo","json":"{first_name:sleepy,last_name:owl, phone:[phone],company:Forest, email:     owl, notes:whoooo}"}]

使用我在网络上找到的这个代码片段，我试图让它显示在平面视图中，但它是空白的：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform} from 'react-native';
export default class App extends Component  {
constructor(props)
{
super(props);
this.state = {
isLoading: true
}
}
componentDidMount() {
return fetch('https://functions-ww.azurewebsites.net/api/SteveListJSON')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#607D8B",
}}
/>
);
}
GetFlatListItem (company) {
Alert.alert(company);
}

render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.FlatListItemStyle} onPress={this.GetFlatListItem.bind(this, item.company)} > {item.company} </Text>}
keyExtractor={(item, index) => index.toString()}
/>

</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: 'center',
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,
},
FlatListItemStyle: {
padding: 10,
fontSize: 18,
height: 44,
},
});

我将不胜感激你能提供的任何帮助。 我是新手，所以这可能是我错过的简单东西......

Answer 1

url 以字符串形式返回响应，您需要的数据源是一个对象，因此在设置数据源的状态之前将其更改为对象。 添加这个：--

this.setState({
isLoading: false,
dataSource: JSON.parse(responseJson)
}