React Native Flatlist选择过滤器不刷新

Question

在这里反应本地新手。 我有一个实验程序，通过Flatlist显示值，并在顶部显示Select标头。 当我尝试从下拉列表中选择值时，Flatlist不会在当前加载时显示当前数组数据。 任何想法为什么它不加载？

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

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"
  },
];

更新-我已经弄清楚了如何显示数组值。 我设置下面的平面列表，并通过执行set.state更新数组值

Answer 1

向FlatList添加“ extraData = {this.state}”属性，以便列表本身在状态更改时重新呈现。

Answer 2

这是因为FlatList始终指向静态数据。 您实际上并没有在makeRemoteRequest更新数据源， makeRemoteRequest只是返回一个数组而对其不执行任何操作。 将数据存储在状态变量中，使用新数据设置状态，并使FlatList指向该数据。

您还试图访问未在任何地方定义的makeRemoteRequest中的data 。

在构造函数中，您将初始化状态变量以执行静态数据。 然后在makeRemoteRequest ，将状态设置为派生this.setState({ data: newData })的新数据。 如果它指向您的数据状态变量，这将随后在FlatList组件中触发一个渲染。