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

Posted 2023-03-13

【中文标题】无法在本机反应中显示平面列表中的所有数据

【英文标题】：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 为空时，所有名称都应显示在列表中。

【参考方案1】：

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

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

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