在这里反应本地新手。我有一个实验程序通过 Flatlist 和顶部的 Select 标题显示值。当我尝试从下拉列表中选择值时，Flatlist 在首次加载时显示正常，Flastlist 不显示当前数组数据。任何想法为什么它不加载？
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import {Select, Option} from "react-native-chooser";
import FlatList from 'react-native/Libraries/Lists/FlatList';
import demoData from './data';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Property Listing',
};
constructor(props) {
super(props);
this.state = {
item: [],
refreshing: false
};
}
componentWillMount() {
this.makeRemoteRequest({refreshing: false});
}
makeRemoteRequest = (data1) => {
this.setState({refreshing: true});
const item = [];
for (let i = 0; i < data.length; i++) {
let obb = data[i].location.state;
if(data1===obb) {
item.push(data[i]);
}
this.setState({refreshing: false});
}
console.log(item);
return item;
};
handleRefresh = () => {
this.setState({refreshing: true},
() => {
this.makeRemoteRequest();
}
);
};
renderHeader = () => {
return (
<Select
onSelect = {this.makeRemoteRequest.bind(this)}
defaultText = "Select a State"
style={styles.selectWrapper}
optionListStyle = {{backgroundColor : "#F5FCFF"}}>
<Option value = "Arizona">Arizona</Option>
<Option value = "California">California</Option>
<Option value = "New Hampshire">New Hampshire</Option>
</Select>
);
};
renderItem({item, index }) {
return(
<View style={styles.container2}>
<View><Image source={{ uri: item.picture}} style={styles.photo} /></View>
<View style={styles.info}>
<View><Text style={styles.headline}>Address:</Text></View>
<View><Text style={styles.text}>{`${item.location.street} ${item.location.city} ${item.location.state} ${item.location.postcode}`}</Text></View>
<View><Text>Bed: {`${item.houseDetails.bed} Bath: ${item.houseDetails.bath} Rent: $${item.houseDetails.monthlyRent}`}</Text></View>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<FlatList style={styles.container} data={demoData} renderItem={this.renderItem} ListHeaderComponent={this.renderHeader} refreshing={this.state.refreshing} onRefresh={this.handleRefresh} keyExtractor={item => item.email}/>
</View>
);
}
}
const HomeView = StackNavigator({
Home: { screen: HomeScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
},
container2: {
flexWrap: 'wrap',
padding: 10,
backgroundColor: '#F0F0F0',
borderColor: '#8E8E8E',
borderWidth: StyleSheet.hairlineWidth,
},
selectWrapper: {
flexWrap: 'wrap',
padding: 10,
backgroundColor: '#F0F0F0',
borderColor: '#8E8E8E',
borderWidth: StyleSheet.hairlineWidth,
margin: 10,
width: 340,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
headline: {
fontWeight: 'bold',
},
text: {
fontSize: 16,
textAlign :'left',
},
photo: {
width: 340,
height: 210,
borderRadius: 2,
},
info: {
padding: 10,
},
});
AppRegistry.registerComponent('AwesomeProject3', () => HomeView);
我很感激任何想法，我坚持了几天。我想我需要一些帮助。谢谢！
=== 更新 JSON 数据文件已添加
文件名：data.js
导出默认数据 = [
{
“性别”：“男性”，
“姓名”： {
“头衔”：“先生”，
“第一”：“艾登”，
“最后”：“卢卡斯”
},
“电子邮件”：“aiden.lucas@example.com”，
“电话”：“（661）-131-8187”，
“细胞”：“（408）-707-4720”，
“房屋详情”：{
“床”：“1”，
“浴”：“1”，
“面积”：“1100 平方英尺”，
"monthlyRent": '2800'
},
“地点”： {
“街道”：“橡树草坪大街 1446 号”，
“城市”：“莱克伍德”，
“州”：“亚利桑那州”，
“邮政编码”：60649
},
"图片": "https://maps.googleapis.com/maps/api/streetview?location=37.730064,-122.4245857&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
“性别”：“男性”，
“姓名”： {
“头衔”：“先生”，
“第一”：“马里奥”，
“最后”：“沃尔特斯”
},
“电子邮件”：“mario.walters@example.com”，
“电话”：“（612）-481-1846”，
“细胞”：“（213）-966-9760”，
“房屋详情”：{
“床”：“2”，
“浴”：“1”，
“面积”：“970 平方英尺”，
"monthlyRent": '2500'
},
“地点”： {
“街道”：“内街 266 号”，
“城市”：“旧金山”，
“州”：“加利福尼亚”，
“邮政编码”：60649
},
"图片": "https://maps.googleapis.com/maps/api/streetview?location=37.7379437,-122.3875249&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
“性别”：“男性”，
“姓名”： {
“头衔”：“先生”，
“第一”：“约瑟夫”，
“最后”：“兰伯特”
},
“电子邮件”：“joseph.lambert@example.com”，
“电话”：“（481）-952-7376”，
“细胞”：“（249）-044-4521”，
“房屋详情”：{
“床”：“2”，
“浴”：“1”，
“面积”：“986 平方英尺”，
"monthlyRent": '3500'
},
“地点”： {
“街”：“山核桃街西 2673 号”，
“城市”：“萨里”，
“州”：“新罕布什尔州”，
“邮政编码”：12183
},
"图片": "https://maps.googleapis.com/maps/api/streetview?location=37.7352032,-122.3979859&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
“性别女”，
“姓名”： {
“标题”：“女士”，
“第一”：“蒂娜”，
“最后”：“詹宁斯”
},
“电子邮件”：“tina.jennings@example.com”，
“电话”：“（938）-316-5866”，
“细胞”：“（524）-445-7740”，
“房屋详情”：{
“床”：“1”，
“浴”：“1”，
“面积”：“200 平方英尺”，
"monthlyRent": '1200'
},
“地点”： {
“街道”：“600 洛斯帕莫斯博士”，
“城市”：“旧金山”，
“州”：“加利福尼亚”，
“邮政编码”：60649
},
"图片": "https://maps.googleapis.com/maps/api/streetview?location=37.7349324,-122.4555814&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
];
更新---我已经弄清楚如何显示数组值。我调整下面的平面列表并通过执行 set.state 更新数组值