有什么方法可以在 React Native FlatList 中实现搜索输入吗？

Question

我想为平面列表数据实现一个搜索栏，问题是搜索功能正在运行，但在搜索完成或搜索文本为空后，它不会返回到其原始状态数据。

 const [data,setdata] = useState([{
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        fullName: "Bianca Bradley",
        timeStamp: "12:47 PM",
        recentText: "Contacts",
        avatarUrl: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
      }, {
        id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
        fullName: "Sujitha Mathur",
        timeStamp: "11:11 PM",
        recentText: "Contacts",
        avatarUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU"
      },
]
 const handleSearch = text => {
      const formattedQuery = text.toLowerCase();
      const ndata = data.filter((item) => {
        return item.fullName.toLowerCase().match(formattedQuery)
      })
      setdata(ndata);
      setQuery(text);
      console.log("Working",ndata)
     }
 return (
    <>
     <Center>
      <View style={[styles.searchboxview]}>
        <Input type="text" value={query} onChangeText={(text)=>handleSearch(text)} style={[styles.searchbox]} textAlign="center" placeholder="Search User Name" w="85%" maxWidth="340px" />
      </View>
  </Center>
    <FlatList data={data} style={[styles.list]} renderItem={({
    item
  })  keyExtractor={item => item.id} />
 </>
  )
}

我可以预测的问题是 setdata(ndata) 设置为新的搜索数据并且它不会 returns 返回到原始数据列表。解决方案是什么？

Answer 1

你可以加个条件，如果textinput里面的文本为空那么我们就把主要的数据设置为传给flatlist的数据

有什么方法可以在 React Native FlatList 中实现搜索输入吗？

Is there any method to implement search input in React Native FlatList?

react-native