仅当前 2 个字符相似时，React 本机搜索栏才会显示平面列表

Question

 here is my code:import React, {useState} from 'react'; import { Text, View, StyleSheet, FlatList, ActivityIndicator, TextInput, } from 'react-native'; const namesData = [ {fname: 'Sujay', lname: 'Atkare'}, {fname: 'Pankaj', lname: 'Bhardwaj'}, {fname: 'Sagar', lname: 'Vande'}, {fname: 'Rohit', lname: 'Dhanke'}, {fname: 'Uday', lname: 'Kadam'}, {fname: 'Abhijeet', lname: 'Shah'}, {fname: 'Kundan', lname: 'Zalate'}, {fname: 'Sneha', lname: 'Shinde'}, {fname: 'Akshay', lname: 'Singh'}, {fname: 'Dilip', lname: 'Patil'}, {fname: 'Imran', lname: 'Khan'}, {fname: 'Saurabh ', lname: 'Kulkarni'}, ]; const SearchBarScreen = () => { const [data, setData] = useState([]); const [value, setValue] = useState(''); const _onRenderSeparator = () => { return ( <View style={{ height: 1, width: '100%', backgroundColor: 'pink', }} /> ); }; const _searchData = text => { if (text) { let newList = namesData.filter(item => { const newItem = `${(item.fname + '' + item.lname).toUpperCase()}`; const textData = text.toUpperCase(); return newItem.indexOf(textData) > -1; }); setData(newList); setValue(text); } else { setData([]); setValue(text); } }; const _onRenderHeader = () => { return ( <TextInput style={{height: 60, borderColor: '#000', borderWidth: 1}} placeholder="Search here" onChangeText={text => _searchData(text)} value={value} /> ); }; return ( <View style={{ flex: 1, padding: 25, width: '98%', alignSelf: 'center', justifyContent: 'center', }}> <FlatList data={data} renderItem={({item}) => ( <Text style={{padding: 10}}> {item.fname} {item.lname} </Text> )} keyExtractor={item => item.fname} ItemSeparatorComponent={() => _onRenderSeparator()} ListHeaderComponent={_onRenderHeader()} enableEmptySections={true} /> </View> ); }; export default SearchBarScreen;

我是本机反应的新手，我一直在尝试实现一个搜索栏，它从数组中接收数据列表并使用 flatlist 呈现 ig。 但是我只想在其初始字符与我键入的字符相似时才显示 flatlist。 前任。 如果我在搜索栏中输入“Go”。 我只想显示以“Go”开头的项目列表

Answer 1

不知道您的特定数据格式，但您通常希望执行以下操作：

const MyComponent = (props) => {
  const [query, setQuery] = useState('');
  const [data, setData] = useState(props.data);

  useEffect(() => {
    // filter your data here. I'm assuming you have a list of strings

    // when user types something and them clears the text, you want to go back to initial list
    if (!query) {
      setData(props.data);
    }

    setData(data.filter((d) => d.includes(query)));
  }, [query]);
  return (
    <View>
      <TextInput
        value={query}
        onChangeText={(t) => {
          setQuery(t);
        }}
      />
      <FlatList
        data={data}
        renderItem={() => {
          // whatever you want to render
        }}
      />
    </View>
  );
};