Android 集成电路数据。实际上,您并没有在makeRemoteRequest中更新数据源,只是返回了一个数组,并没有对其进行任何操作。将数据存储在状态变量中,使用新数据设置状态,并使平面列表指向此数据
您还试图在Android 集成电路数据。实际上,您并没有在makeRemoteRequest中更新数据源,只是返回了一个数组,并没有对其进行任何操作。将数据存储在状态变量中,使用新数据设置状态,并使平面列表指向此数据,android,react-native,react-native-flatlist,Android,React Native,React Native Flatlist,您还试图在makeRemoteRequest中访问未在任何地方定义的数据 在构造函数中,您将初始化状态变量来处理静态数据。然后在makeRemoteRequest中,将状态设置为派生的新数据段this.setState({data:newData})。这将随后触发平面列表组件中的渲染,前提是该组件指向数据状态变量。平面列表中的数据从何而来?它没有在任何地方定义。数据来自json文件。。我更新了上面的帖子,我添加了数据文件内容示例,我将“extraData={this.state.item}”添加
makeRemoteRequest
中访问未在任何地方定义的数据
在构造函数中,您将初始化状态变量来处理静态数据。然后在makeRemoteRequest
中,将状态设置为派生的新数据段this.setState({data:newData})
。这将随后触发平面列表组件中的渲染,前提是该组件指向数据状态变量。平面列表中的数据从何而来?它没有在任何地方定义。数据来自json文件。。我更新了上面的帖子,我添加了数据文件内容示例,我将“extraData={this.state.item}”添加到Flatlist中,但仍然不走运,你能详细说明解决方案吗?并确认它是否有效?请尝试在回答时提供更多信息。啊,我明白了。。您能更正我的代码吗?如何更新makeremoterequests中的数据?仍然是新手,试图理解react原生编码风格。。我不知道如何从我的选择选项值调节数据对象,并将其存储到新的数据数组和广播中。你能帮我组织一下,让我能了解更多吗?老实说谢谢你,如果我修改了你的代码,我不认为对你有多大好处。我建议您阅读React/Native,了解状态、道具和组件生命周期,以便更好地了解正在发生的事情,并做出更好的决策。RN网站有大量非常有用的文档。我用更多的信息更新了我的答案。好的,谢谢,幸运的是我已经用不同的方式找到了答案。
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);
export default data = [
{
"gender": "Male",
"name": {
"title": "Mr",
"first": "Aiden",
"last": "Lucas"
},
"email": "aiden.lucas@example.com",
"phone": "(661)-131-8187",
"cell": "(408)-707-4720",
"houseDetails": {
"bed": "1",
"bath": "1",
"area": "1100 sqft",
"monthlyRent": '2800'
},
"location": {
"street": "1446 Oak Lawn Ave",
"city": "Lakewood",
"state": "Arizona",
"postcode": 60649
},
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.730064,-122.4245857&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
"gender": "Male",
"name": {
"title": "Mr",
"first": "Mario",
"last": "Walters"
},
"email": "mario.walters@example.com",
"phone": "(612)-481-1846",
"cell": "(213)-966-9760",
"houseDetails": {
"bed": "2",
"bath": "1",
"area": "970 sqft",
"monthlyRent": '2500'
},
"location": {
"street": "266 Ney St",
"city": "San Francisco",
"state": "California",
"postcode": 60649
},
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7379437,-122.3875249&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
"gender": "Male",
"name": {
"title": "Mr",
"first": "Joseph",
"last": "Lambert"
},
"email": "joseph.lambert@example.com",
"phone": "(481)-952-7376",
"cell": "(249)-044-4521",
"houseDetails": {
"bed": "2",
"bath": "1",
"area": "986 sqft",
"monthlyRent": '3500'
},
"location": {
"street": "2673 W Pecan St",
"city": "Surrey",
"state": "New Hampshire",
"postcode": 12183
},
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7352032,-122.3979859&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
{
"gender": "female",
"name": {
"title": "Ms",
"first": "Tina",
"last": "Jennings"
},
"email": "tina.jennings@example.com",
"phone": "(938)-316-5866",
"cell": "(524)-445-7740",
"houseDetails": {
"bed": "1",
"bath": "1",
"area": "200 sqft",
"monthlyRent": '1200'
},
"location": {
"street": "600 Los Palmos Dr",
"city": "San Francisco",
"state": "California",
"postcode": 60649
},
"picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7349324,-122.4555814&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
},
];