Блог

У меня есть список названий больниц, которые поступают из api. Я создал функцию поиска, в которой текст, введенный пользователем, будет сопоставлен с названием больницы, а полученные данные будут отображаться на экране.

Ниже приведен мой код:

 const FindNameScreen = (props: any) =gt; {  const [search, setSearch] = useState('');  const [filteredDataSource, setFilteredDataSource] = useState([]);  const [masterDataSource, setMasterDataSource] = useState([]);   const gethospitalList = useCallback(() =gt; {  Apicall  .then(async (resp) =gt; {  // console.log('respgt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;gt;', resp.data);  if (resp) { setMasterDataSource(resp.data); }   else { Alert.alert('Error', resp); }  })  .catch((err: any) =gt; {  console.log(err);  });  }, []);   useEffect(() =gt; { gethospitalList();}, [gethospitalList]);    const searchFilterFunction = (text: any) =gt; {  if (text) {  const newData = masterDataSource.filter(function (item: any) {  const itemData = item.hospital_name.toLowerCase();  const textData = text.toLowerCase();  return itemData.indexOf(textData) gt; -1;  });  setFilteredDataSource(newData);  setSearch(text);  } else {  setFilteredDataSource(masterDataSource);  setSearch(text);  }  };   const ItemView = ({item}) =gt; {  return (  lt;Viewgt;  lt;Text style={styles.itemStyle}gt;{item.hospital_name}lt;/Textgt;  lt;/Viewgt;  );  };   return (  lt;gt;  lt;TextInput  style={styles.textInputStyle}  onChangeText={(text) =gt; searchFilterFunction(text)}  value={search}  underlineColorAndroid="transparent"  placeholder="Search Here"  selectionColor="#4FE6AF"  /gt;  lt;Viewgt;  lt;FlatList  data={filteredDataSource}  keyExtractor={(item, index) =gt; index.toString()}  renderItem={ItemView}  /gt;  lt;/Viewgt;  lt;/gt;  ); }; export default FindNameScreen;  

Сначала я должен показать все названия больниц, а затем, когда пользователь что-то вводит, в соответствии с этим список обновляется. Все это работает нормально.

Моя проблема в том, что когда поле TextInput пустое, должно отображаться все название больницы, но иногда я получаю только два имени, иногда я получаю все имена. Этого не должно произойти. Когда TextInput пусто, то все имена должны отображаться в списке.

Изначально ваш плоский список не будет отображать какие-либо элементы, потому что состояние filteredDataSource в начале пустое.

Функция searchFilterFunction будет активирована только после того, как вы введете что-то в TextInput. Итак, чтобы отобразить все имена в начале, попробуйте следующее:

 lt;FlatList  data={  search === '' amp;amp; filteredDataSource.length === 0  ? masterDataSource  : filteredDataSource  }  keyExtractor={(item, index) =gt; index.toString()}  renderItem={ItemView}  /gt;