Question

在这里回应原生新手。我有一个实验程序显示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": "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"
  },
];

UPDATE --- 我已经弄明白了如何显示数组值。我调整下面的平面列表并通过执行set.state

更新数组值

Answer 1

将“extraData = {this.state}”prop添加到FlatList，以便列表本身重新呈现状态更改。

Answer 2

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

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

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

React Native Flatlist选择过滤器不刷新

2 个答案: