Фильтр выбора React Native Flatlist не обновляется

реагировать родной новичок здесь. У меня есть экспериментальная программа, отображающая значения 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


export default data = [
  {
    "gender": "Male",
    "name": {
      "title": "Mr",
      "first": "Aiden",
      "last": "Lucas"
    },
    "email": "[email protected]",
    "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": "[email protected]",
    "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": "[email protected]",
    "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": "[email protected]",
    "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


person alfred.alaan    schedule 23.05.2017    source источник
comment
Откуда data в вашем FlatList? Это нигде не определено.   -  person sooper    schedule 24.05.2017
comment
данные из файла json .. я обновляю пост выше, я добавил образец содержимого файла данных   -  person alfred.alaan    schedule 24.05.2017


Ответы (2)


Добавьте реквизит «extraData={this.state}» в FlatList, чтобы сам список повторно отображался при изменении состояния.

person Rahul    schedule 25.05.2017
comment
я добавил extraData={this.state.item} в Flatlist, но все равно не повезло, можете ли вы разработать более подробное решение? и подтвердить, что он работает? - person alfred.alaan; 25.05.2017
comment
Пожалуйста, попробуйте предоставить больше информации с вашим ответом. - person CaptainBli; 25.05.2017

Это потому, что ваш FlatList всегда указывает на статические данные. На самом деле вы не обновляете источник данных в makeRemoteRequest, просто возвращаете массив и ничего с ним не делаете. Сохраните свои данные в переменной состояния, установите состояние с вашими новыми данными и укажите FlatList на эти данные.

Вы также пытаетесь получить доступ к data в makeRemoteRequest, который нигде не определен.

В вашем конструкторе вы должны инициализировать свою переменную состояния для своих статических данных. Затем в makeRemoteRequest вы должны установить состояние для новой части данных, которую вы получили this.setState({ data: newData }). Это впоследствии вызовет рендеринг в вашем компоненте FlatList, если он указывает на вашу переменную состояния данных.

person sooper    schedule 26.05.2017
comment
ааа, понятно... можете ли вы исправить мой код, как обновлять данные в makeremoterequests? все еще новичок, пытающийся понять стиль кодирования, основанный на реакции. Я не уверен, как обусловить объект данных из моего значения параметра выбора и сохранить в новый массив данных и транслировать. Можете ли вы помочь мне структурировать, чтобы я мог понять больше? благодарю вас - person alfred.alaan; 26.05.2017
comment
Честно говоря, я не думаю, что вам будет очень полезно, если я исправлю ваш код. Я рекомендую вам прочитать о React/Native и узнать о состояниях, свойствах и жизненных циклах компонентов, чтобы вы лучше понимали, что происходит, и могли принимать более правильные решения. На веб-сайте RN есть много очень полезной документации. Я обновил свой ответ, добавив немного больше информации. - person sooper; 26.05.2017
comment
Хорошо, спасибо, к счастью, я уже разобрался с этим по-другому. - person alfred.alaan; 27.05.2017