无法在react native中显示flatlist中的所有数据

Question

我有一个来自api的医院名称列表。我做了一个搜索功能，用户输入的文本将与医院名称匹配，结果数据将显示在屏幕上。

下面是我的代码:

const FindNameScreen = (props: any) => {
const [search, setSearch] = useState('');
const [filteredDataSource, setFilteredDataSource] = useState([]);
const [masterDataSource, setMasterDataSource] = useState([]);
const gethospitalList = useCallback(() => {
Apicall
.then(async (resp) => {
// console.log('resp>>>>>>>>>>>>>>>>>>>>>', resp.data);
if (resp) { setMasterDataSource(resp.data); } 
else { Alert.alert('Error', resp); }
})
.catch((err: any) => {
console.log(err);
});
}, []);
useEffect(() => { gethospitalList();}, [gethospitalList]);

const searchFilterFunction = (text: any) => {
if (text) {
const newData = masterDataSource.filter(function (item: any) {
const itemData = item.hospital_name.toLowerCase();
const textData = text.toLowerCase();
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
} else {
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
const ItemView = ({item}) => {
return (
<View>
<Text style={styles.itemStyle}>{item.hospital_name}</Text>
</View>
);
};
return (
<>
<TextInput
style={styles.textInputStyle}
onChangeText={(text) => searchFilterFunction(text)}
value={search}
underlineColorAndroid="transparent"
placeholder="Search Here"
selectionColor="#4FE6AF"
/>
<View>
<FlatList
data={filteredDataSource}
keyExtractor={(item, index) => index.toString()}
renderItem={ItemView}
/>
</View>
</>
);
};
export default FindNameScreen;

最初我必须显示所有医院的名称，然后当用户输入一些东西时，然后根据列表更新。这些都很好。

我的问题是当TextInput为空时，应该显示所有的医院名称，但有时我只得到两个名称，有时我得到所有的名称。这不应该发生。当TextInput为空时，则所有名称应显示在列表中。

Answer 1

最初，你的Flatlist不会呈现任何元素，因为filteredDataSourceState开头为空白

searchFilterFunction只有当你在TextInput中输入一些东西时才会触发。为了在开头显示所有的名字，试试这个:

<FlatList
data={
search === '' && filteredDataSource.length === 0
? masterDataSource
: filteredDataSource
}
keyExtractor={(item, index) => index.toString()}
renderItem={ItemView}
/>