如何使用 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&nbsp;filteredPlaces&nbsp;=&nbsp;state.places.filter(&nbsp;place&nbsp;=>&nbsp;place.description&nbsp;===&nbsp;"Dermatologista"&nbsp;)并将filteredPlaces整个对象而不是整个对象传递给子组件。

Answer 2

尝试这个<SafeAreaView>&nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp;styles = {styles.PlaceContainer}&nbsp; &nbsp; &nbsp;showsVerticalScrollIndicator&nbsp; &nbsp; &nbsp;data={state.places}&nbsp; &nbsp; &nbsp;keyExtractor={item => item.id}&nbsp; &nbsp; &nbsp;renderItem={({ item }) => {&nbsp; &nbsp; &nbsp; &nbsp;item.description == "dermatologista" ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<View key={item.id} style={styles.place} >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text>{item.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text>{item.description}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</View>&nbsp; &nbsp; &nbsp; &nbsp;):""&nbsp; &nbsp; &nbsp;}&nbsp;}/></SafeAreaView>