如何在React Native列表视图中筛选指定Description的条目？

嘿，我来帮你搞定这个筛选需求！你只需要利用JavaScript数组的filter()方法，在FlatList的data属性里对现有数据做过滤，就能轻松只展示description为Dermatologista的条目。

修改后的完整代码示例： #

import React, { useState } from 'react';
import { SafeAreaView, FlatList, View, Text, StyleSheet } from 'react-native';

export default function YourComponent() {
  const [state, setState] = useState({ 
    places: [ 
      { id: 1, title: 'Clinica da pele', description: 'Dermatologista', latitude:-2.42206406, longitude:-54.71947789, }, 
      { id: 2 , title:'Unimed', description:'Hospital', latitude:-2.42501721, longitude:-54.71146077, }, 
      { id: 3, title: 'Dra. Josimar', description:'Dermatologista', latitude: -2.4288346, longitude:-54.7290553, } 
    ] 
  });

  return(
    <SafeAreaView>
      <FlatList 
        style={styles.PlaceContainer} // 修正了原代码里的`styles`为`style`属性
        showsVerticalScrollIndicator={false} // 补充布尔值避免警告
        data={state.places.filter(item => item.description === 'Dermatologista')} // 核心过滤逻辑
        keyExtractor={item => item.id.toString()} // 将数字id转为字符串，符合React的key要求
        renderItem={({ item }) => { 
          return(
            <View key={item.id} style={styles.place} >
              <Text>{item.title}</Text>
              <Text>{item.description}</Text>
            </View>
          ) 
        }} 
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  PlaceContainer: {
    flex: 1,
    paddingHorizontal: 10
  },
  place: {
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0'
  }
});

额外扩展建议： #

如果之后需要支持分类切换（比如在Dermatologista和Hospital之间切换），可以把筛选条件做成状态变量，让功能更灵活：

// 新增分类状态
const [selectedCategory, setSelectedCategory] = useState('Dermatologista');

// FlatList的data改为动态匹配选中的分类
data={state.places.filter(item => item.description === selectedCategory)}

// 可以添加切换按钮
<View style={{flexDirection: 'row', padding: 10}}>
  <Button 
    title="皮肤科" 
    onPress={() => setSelectedCategory('Dermatologista')} 
    style={{marginRight: 10}}
  />
  <Button 
    title="医院" 
    onPress={() => setSelectedCategory('Hospital')} 
  />
</View>

这样就能轻松实现分类切换的功能啦！

内容的提问来源于stack exchange，提问作者Paulo Avila