无法在本机反应中显示平面列表中的所有数据答案

【问题标题】：Not able to show all the data in flatlist in react native无法在本机反应中显示平面列表中的所有数据
【发布时间】：2021-12-08 00:50:14
【问题描述】：

我有一个来自 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 为空时，所有名称都应显示在列表中。

【问题讨论】：

标签： javascript typescript react-native react-native-flatlist

【解决方案1】：

最初，您的 Flatlist 不会呈现任何元素，因为 filteredDataSource 状态一开始是空白的。

searchFilterFunction 只会在您在 TextInput 中输入内容后触发。因此，要在开头显示所有名称，试试这个：

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

【讨论】：