如何使用 item.description 在列表视图中选择项目

Question

这是应用程序，我想创建具有不同类别的不同屏幕，在这种情况下，我有 Dermatologista 和 Hospital，如何只选择一个描述 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(我只想选择描述为 == dermatologista 的项目，我该怎么做？   <SafeAreaView>        <FlatList     styles = {styles.PlaceContainer}     showsVerticalScrollIndicator     data={state.places}     keyExtractor={item => item.id}     renderItem={({ item }) => {       return(         <View key={item.id} style={styles.place} >           <Text>{item.title}</Text>           <Text>{item.description}</Text>         </View>       )     } }/></SafeAreaView>       ) }

Answer 1

您可以使用array.filter：

const filteredPlaces = state.places.filter( place => place.description === "Dermatologista" )

并将filteredPlaces整个对象而不是整个对象传递给子组件。

Answer 2

尝试这个

<SafeAreaView>

        <FlatList

     styles = {styles.PlaceContainer}

     showsVerticalScrollIndicator

     data={state.places}

     keyExtractor={item => item.id}

     renderItem={({ item }) => {

       item.description == "dermatologista" ? (

         <View key={item.id} style={styles.place} >

           <Text>{item.title}</Text>

           <Text>{item.description}</Text>

         </View>

       ):""

     }

 

}

/>

</SafeAreaView>