Выбор элемента из списка выбора и отображение в плоском списке - PullRequest
Новая
       66

Выбор элемента из списка выбора и отображение в плоском списке

2 голосов
/ 29 сентября 2019

Я хочу выбрать «город» в окне выбора, и в моем Flatlist должны отображаться только рестораны из этого города.В общем, если пользователь выбирает «city1», то в списке должны отображаться только рестораны этого города.

Вот мой текущий код, функция getRestaurants (): 

   async getRestaurants() {

    firebase.firestore().collection('restaurants').get().then(querySnapshot => {
        const data = querySnapshot.docs.map(doc => doc.data());
        this.setState({ dataRestaurants: data });
        console.log("printing picked city", this.state.city);

        if (this.state.city !== "all") {
            for (let i = 0; i < this.state.dataRestaurants.length; i++) {
                var arr = this.state.dataRestaurants[i];
                var arrStrng = JSON.stringify(arr);
                console.log("Looping through array of restaurants: " + arrStrng);
            }
        }
        else {
            for (let i = 0; i < this.state.dataRestaurants.length; i++) {
                var arr = this.state.dataRestaurants[i];
                var arrStrng = JSON.stringify(arr);
                console.log("Looping through array of restaurants: " + arrStrng);
            }
        }
    })
}

Эторендеринг: 

  <View>
                    <View >
                        <Text style={styles.textStyle}>Picker Example</Text>
                        <Picker
                            selectedValue={this.state.city}
                            style={{ height: 50, width: 100 }}

                            onValueChange={(throttlemodeValue, throttlemodeIndex) =>
                                this.updateCity(throttlemodeValue)}
                        >
                            <Picker.Item label="All" value="all" />
                            <Picker.Item label="Prishtine" value="Prishtine" />
                            <Picker.Item label="Gjakove" value="Gjakove" />
                            <Picker.Item label="Prizren" value="Prizren" />
                            <Picker.Item label="Gjilan" value="Gjilan" />

                        </Picker>
                        <Text style={styles.textStyle}> {"City =" + this.state.city}</Text>
                    </View>

                    <View >
                        <FlatList
                            style={styles2.containerStyle}
                            keyExtractor={(item) => item.res_id}
                            data={this.state.dataRestaurants}
                            enableEmptySections={true}
                            renderItem={({ item }) => this.renderNativeItem(item)}
                        />
                    </View>
                </View>

1 Ответ

1 голос
/ 29 сентября 2019

Вот ссылка для Демонстрация

Ведение выбранной переменной города в штате. Обновите ее с помощью средства выбора onChange, затем из измененной переменной состояния выберите соответствующие данные изсостояние / реквизит как 

this.state.dataRestaurant[this.state.city]

Ваш плоский список выглядит следующим образом. 

<FlatList
        style={styles.flatList}
        keyExtractor={item => item.res_id}
        data={this.state.dataRestaurants[this.state.city]}
        enableEmptySections={true}
        renderItem={({ item }) => this.renderNativeItem(item)}
      />
...