Javascript React本机Flatlist搜索未从firebase用户集合返回任何值

因此，我最近尝试在firebase中对用户进行平面列表搜索，但我遇到了一系列错误，尽管代码中似乎没有bug。目前，该列表进行搜索，但不返回任何内容，尽管firebase“用户”集合中显然有数据。当我尝试将“results”记录在getUsers（）中Promise的resolve语句的正上方时，我突然看到了用户，尽管我得到了“results”不存在的错误，这很奇怪，因为为什么这个错误使代码工作？无论如何，如果有人能帮助我使这个平面列表工作，我将不胜感激。我已经在这方面工作了3天了，似乎无法在线找到任何解决方案或修复代码。为了你的帮助，我很乐意给你一个邓肯甜甜圈，因为这对我来说意义重大。我感谢所有的帮助和提示，并提前感谢您抽出时间！（下面是我的平面列表代码，没有样式）

import React，{useState，useContext，useffect}来自“React”；
进口{
看法
文本，
样式表，
状态栏，
文本输入，
滚动视图，
形象,，
活动指示器，
可触摸不透明度，
平面列表，
}从“反应本族语”；
从“./context/FirebaseContext”导入{FirebaseContext}；
从“./context/UserContext”导入{UserContext}；
从“@expo/vector icons”导入{FontAwesome5，Ionicons}”；
从“expo linear gradient”导入{LinearGradient}；
从“洛达斯”进口；
导入“firebase/firestore”；
从“firebase”导入firebase；
从“./config/firebase”导入配置；
const SearchScreen=（{navigation}）=>{
常量[searchText，setSearchText]=useState（“”）；
const[loading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
const[refreshing，setRefreshing]=useState（false）；
const[query，setQuery]=useState（“”）；
const[userNumLoad，setUserNumLoad]=useState（20）；
const[error，setError]=useState（“”）；
useffect（（）=>{
const func=async（）=>{
等待makeRemoteRequest（）；
};
func（）；
}, []);
const contains=（用户，查询）=>{
if（user.username.includes（查询））{
返回true；
}
返回false；
};
const getUsers=async（limit=20，query2=”“）=>{
var列表=[]；
等待火力基地
.firestore（）
.收集（“用户”）
.get（）
.然后（（querySnapshot）=>{
querySnapshot.forEach（（doc）=>{
if（doc.data（）.username.includes（query2））{
list.push({
profilePhotoUrl:doc.data（）.profilePhotoUrl，
用户名：doc.data（）.username，
好友：doc.data（）.friends.length，
uid:doc.data（）.uid，
});
}
});
});
设置超时（（）=>{
setData（列表）；
}, 4000);
返回新承诺（异步（res，rej）=>{
if（query.length==0）{
设置超时（（）=>{
res（u.take（数据，限制））；
}, 8000);
}否则{
const formattedQuery=query.toLowerCase（）；
const results=\过滤器（数据，（用户）=>{
返回包含（用户、formattedQuery）；
});
设置超时（（）=>{
res（u.take（results，limit））；
}, 8000);
}
});
};
const makeRemoteRequest=\ u0.debounce（异步（）=>{
常量用户=[]；
设置加载（真）；
等待getUsers（userNumLoad，查询）
。然后（（用户）=>{
设置加载（假）；
setData（用户）；
设置刷新（假）；
})
.catch（（错误）=>{
设置刷新（假）；
设置错误（err）；
设置加载（假）；
//警报（“发生错误。请稍后再试。”）；
控制台日志（err）；
});
}, 250);
const handleSearch=异步（文本）=>{
设置搜索文本（文本）；
const formatQuery=text.toLowerCase（）；
等待setQuery（text.toLowerCase（））；
常量数据2=uu.filter（数据，（用户）=>{
返回包含（用户、formatQuery）；
});
setData（数据2）；
等待makeRemoteRequest（）；
};
常量handleRefresh=async（）=>{
设置刷新（真）；
等待makeRemoteRequest（）；
};
const handleLoadMore=async（）=>{
setUserNumLoad（userNumLoad+20）；
等待makeRemoteRequest（）；
};
常量renderFooter=（）=>{
如果（！loading）返回空值；
返回(
);
};
返回(
navigation.goBack（）}
>
搜寻
handleSearch（newSearchText）}
占位符=“搜索人员”
autoCapitalize=“无”
自动更正={false}
/>
(
{item.username}
{item.friends}朋友
)}
ListFooterComponent={renderFooter}
keyExtractor={（项）=>item.username}
正在刷新={正在刷新}
onEndReachedThreshold={100}
单面搜索={
import React, { useState, useContext, useEffect } from "react";
import {
    View,
    Text,
    StyleSheet,
    StatusBar,
    TextInput,
    ScrollView,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    FlatList,
} from "react-native";
import { FirebaseContext } from "../context/FirebaseContext";
import { UserContext } from "../context/UserContext";
import { FontAwesome5, Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import _ from "lodash";
import "firebase/firestore";
import firebase from "firebase";
import config from "../config/firebase";

const SearchScreen = ({ navigation }) => {
    const [searchText, setSearchText] = useState("");
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    const [query, setQuery] = useState("");
    const [userNumLoad, setUserNumLoad] = useState(20);
    const [error, setError] = useState("");

    useEffect(() => {
        const func = async () => {
            await makeRemoteRequest();
        };
        func();
    }, []);

    const contains = (user, query) => {
        if (user.username.includes(query)) {
            return true;
        }
        return false;
    };

    const getUsers = async (limit = 20, query2 = "") => {
        var list = [];
        await firebase
            .firestore()
            .collection("users")
            .get()
            .then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    if (doc.data().username.includes(query2)) {
                        list.push({
                            profilePhotoUrl: doc.data().profilePhotoUrl,
                            username: doc.data().username,
                            friends: doc.data().friends.length,
                            uid: doc.data().uid,
                        });
                    }
                });
            });

        setTimeout(() => {
            setData(list);
        }, 4000);


        return new Promise(async (res, rej) => {
            if (query.length === 0) {
                setTimeout(() => {
                    res(_.take(data, limit));
                }, 8000);

            } else {
                const formattedQuery = query.toLowerCase();
                const results = _.filter(data, (user) => {
                    return contains(user, formattedQuery);
                });
                setTimeout(() => {
                    res(_.take(results, limit));
                }, 8000);

            }
        });
    };

    const makeRemoteRequest = _.debounce(async () => {
        const users = [];
        setLoading(true);
        await getUsers(userNumLoad, query)
            .then((users) => {
                setLoading(false);
                setData(users);
                setRefreshing(false);
            })
            .catch((err) => {
                setRefreshing(false);
                setError(err);
                setLoading(false);
                //alert("An error has occured. Please try again later.");
                console.log(err);
            });
    }, 250);

    const handleSearch = async (text) => {
        setSearchText(text);
        const formatQuery = text.toLowerCase();
        await setQuery(text.toLowerCase());
        const data2 = _.filter(data, (user) => {
            return contains(user, formatQuery);
        });
        setData(data2);
        await makeRemoteRequest();
    };

    const handleRefresh = async () => {
        setRefreshing(true);
        await makeRemoteRequest();
    };

    const handleLoadMore = async () => {
        setUserNumLoad(userNumLoad + 20);
        await makeRemoteRequest();
    };

    const renderFooter = () => {
        if (!loading) return null;

        return (
            <View style={{ paddingVertical: 20 }}>
                <ActivityIndicator animating size="large" />
            </View>
        );
    };

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity
                    style={styles.goBackButton}
                    onPress={() => navigation.goBack()}
                >
                    <LinearGradient
                        colors={["#FF5151", "#ac46de"]}
                        style={styles.backButtonGradient}
                    >
                        <Ionicons name="arrow-back" size={30} color="white" />
                    </LinearGradient>
                </TouchableOpacity>
                <View style={styles.spacer} />
                <Text style={styles.headerText}>Search</Text>
                <View style={styles.spacer} />
                <View style={{ width: 46, marginLeft: 15 }}></View>
            </View>
            <View style={styles.inputView}>
                <FontAwesome5 name="search" size={25} color="#FF5151" />
                <TextInput
                    style={styles.input}
                    label="Search"
                    value={searchText}
                    onChangeText={(newSearchText) => handleSearch(newSearchText)}
                    placeholder="Search for people"
                    autoCapitalize="none"
                    autoCorrect={false}
                />
            </View>

            <FlatList
                style={styles.list}
                data={data}
                renderItem={({ item }) => (
                    <TouchableOpacity>
                        <View style={styles.listItem}>
                            <Image
                                style={styles.profilePhoto}
                                source={
                                    item.profilePhotoUrl === "default"
                                        ? require("../../assets/defaultProfilePhoto.jpg")
                                        : { uri: item.profilePhotoUrl }
                                }
                            />
                            <View style={styles.textBody}>
                                <Text style={styles.username}>{item.username}</Text>
                                <Text style={styles.subText}>{item.friends} Friends</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                )}
                ListFooterComponent={renderFooter}
                keyExtractor={(item) => item.username}
                refreshing={refreshing}
                onEndReachedThreshold={100}
                onEndReached={handleLoadMore}
                onRefresh={handleRefresh}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    searchbar: {
        backgroundColor: 'white'
    },
    header: {
        height: 70,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 60,
        paddingLeft: 10,
        paddingRight: 10
    },
    goBackButton: {
        width: 46,
        height: 46,
        borderRadius: 23,
        marginBottom: 10,
        marginLeft: 15
    },
    backButtonGradient: {
        borderRadius: 23,
        height: 46,
        width: 46,
        justifyContent: 'center',
        alignItems: 'center'
    },
    settingsButton: {
        width: 46,
        height: 46,
        borderRadius: 23,
        marginRight: 15,
        marginBottom: 10
    },
    settingsButtonGradient: {
        borderRadius: 23,
        height: 46,
        width: 46,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        height: 45,
        width: 250,
        paddingLeft: 10,
        fontFamily: "Avenir",
        fontSize: 18
    },
    inputView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50,
        paddingLeft: 10,
        paddingRight: 20,
        shadowColor: 'gray',
        shadowOffset: {width: 5, height: 8},
        shadowOpacity: 0.1,
        backgroundColor: "#ffffff",
        marginRight: 28,
        marginLeft: 28,
        marginTop: 10,
        marginBottom: 25
    },
    headerText: {
        fontSize: 35,
        fontWeight: "800",
        fontFamily: "Avenir",
        color: "#FF5151",
    },
    spacer: {
        width: 50
    },
    listItem: {
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
        paddingBottom: 10,
        backgroundColor: "white",
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 10,
        borderRadius: 15,
        alignItems: 'center',
        shadowOpacity: 0.05,
        shadowRadius: 2,
        shadowOffset: {width: 3, height: 3}
    },
    line: {
        width: 100,
        color: 'black',
        height: 1
    },
    profilePhoto: {
        height: 50,
        width: 50,
        borderRadius: 25
    },
    username: {
        fontSize: 18,
        fontFamily: "Avenir",
        paddingBottom: 3
    },
    subText: {
        fontSize: 15,
        fontFamily: "Avenir"
    },
    textBody: {
        flex: 1,
        justifyContent: 'center',
        marginLeft: 20
    }
});

export default SearchScreen;

// above "const SearchScreen = ..." but below "searchUsernames"
const getUsers = async (limit = 20, containsString = "") => {
    const usernameIdPairs = await searchUsernames(limit, containsString);        

    // compile a list of user IDs, in batches of 10.
    let currentChunk = [], currentChunkLength = 0;
    const chunkedUIDList = [currentChunk];
    for (const pair of usernameIdPairs) {
        if (currentChunkLength === 10) {
            currentChunk = [pair.uid];
            currentChunkLength = 1;
            chunkedUIDList.push(currentChunk);
        } else {
            currentChunk.push(pair.uid);
            currentChunkLength++;
        }
    }

    const uidToDataMap = {}; // uid -> user data
    
    const usersFSRef = firebase.firestore().collection("users");
    
    // fetch each batch of users, adding their data to uidToDataMap
    await Promise.all(chunkedUIDList.map((thisUIDChunk) => (
        usersFSRef
            .where("uid", "in", thisUIDChunk)
            .get()
            .then((querySnapshot) => {
                querySnapshot.forEach(userDataSnapshot => {
                    const uid = userDataSnapshot.id;
                    const docData = userDataSnapshot.data();
                    uidToDataMap[uid] = {
                        profilePhotoUrl: docData.profilePhotoUrl,
                        username: docData.username,
                        friends: docData.friends.length, // consider using friendCount instead
                        uid
                    }
                })
            })
    )));

    // after downloading any found user data, return array of user data,
    // in the same order as usernameIdPairs.
    return usernameIdPairs
        .map(({uid}) => uidToDataMap[uid] || null);
}

const SearchScreen = ({ navigation }) => {
  const [searchText, setSearchText] = useState(""); // casing searchText to lowercase is handled by `getUsers` and `searchUsernames`, no need for two state variables for the same data
  const [data, setData] = useState([]);
  const [expanding, setExpanding] = useState(true); // shows/hides footer in FlatList (renamed from "loading")
  const [refreshing, setRefreshing] = useState(false); // shows/hides refresh over FlatList
  const [userNumLoad, setUserNumLoad] = useState(20);
  const [error, setError] = useState(""); // note: error is unused in your code at this point

  // decides whether a database call is needed
  // combined so that individual changes of true to false and vice versa
  // for refreshing and expanding don't trigger unnecessary rerenders
  const needNewData = refreshing || expanding; 

  useEffect(() => {
    // if no data is needed, do nothing
    if (!needNewData) return;

    getUsers(userNumLoad, searchText).then(
      (userData) => {
        // these fire a render
        setData(userData);
        setError("");
        setExpanding(false);
        setRefreshing(false);
      },
      (err) => {
        // these fire a render
        setData([]);
        setError(err);
        setExpanding(false);
        setRefreshing(false);
        //alert("An error has occurred. Please try again later.");
        console.log(err);
      }
    );
  }, [userNumLoad, searchText, needNewData]); // only rerun this effect when userNumLoad, searchText and needNewData change

  const handleSearch = _.debounce((text) => {
    setSearchText(text); // update query text
    setData([]); // empty existing data
    setExpanding(true); // make database call on next draw
  }, 250);

  const handleRefresh = async () => {
    setRefreshing(true); // make database call on next draw
  };

  const handleLoadMore = async () => {
    setUserNumLoad(userNumLoad + 20); // update query size
    setExpanding(true); // make database call on next draw
  };

  const renderFooter = () => {
    if (!expanding) return null;

    return (
      <View style={{ paddingVertical: 20 }}>
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  return ( /** your render code here */ );
}