从选择列表中选择项目并显示在平面列表中

Question

我想在选择器中选择一个“城市”，我的单位列表应仅显示该城市的餐馆。因此，基本上，如果用户选择“ 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>

Answer 1

这里是Demo的链接

将选定的城市变量保持在状态。用选择器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)}
      />