我的FlatList没有渲染是因为我的SearchFiltered ReactNative。

Question

我怎样才能使我的 FlatList 在屏幕上，当我删除这行 const [filteredFreelancerList, setFilteredFreelancerList] = useState(freelancers). 该 freelancers 列表将呈现在屏幕上。以下是我的代码 FlatList 和搜索。搜索已经开始工作了。

<FlatList
    extraData={freelancers}
    refreshing={refreshing}
    onRefresh={refresh}
    renderItem={flatlistItem}
    keyExtractor={item => item._id}
    // data={freelancers} - on this part I have to change to filteredFreelancerList to use the state above
    data={filteredFreelancerList}
/>

我的搜索逻辑在这里

const [freelancers, setFreelancers] = useState([]);
    const [refreshing, setRefreshing] = useState(true);

    const [query, setQuery] = useState('');
    const debounceQuery = useDebounce(query, 300);
    const [filteredFreelancerList, setFilteredFreelancerList] = useState(freelancers);

    console.log(freelancers);

    // Get the values of the freelancers and sort alphabetically
    const freelancerList = Object.values(freelancers)
        .map((freelancer) => ({
            ...freelancer,
            lowerCaseName: freelancer.name.toLowerCase(),
        }))
        .sort((a, b) => a.name > b.name);

    useEffect(() => {

        const lowerCaseQuery = debounceQuery.toLowerCase();
        // const lowerCaseQuery = query.toLowerCase();
        const newFreelancers = freelancerList
            .filter((freelancer) => freelancer.lowerCaseName.includes(lowerCaseQuery)) //;
            // type "a" to display the freelancer's expertise that start with letter "a" in top
            .map((freelancer) => ({
                ...freelancer,
                rank: freelancer.lowerCaseName.indexOf(lowerCaseQuery),
            }))
            .sort((a, b) => a.rank - b.rank);
        // debounce wait for the user to finish typing

        setFilteredFreelancerList(newFreelancers);
        getFreelancers()

    }, [debounceQuery]) //[query]

我的debounce功能

const useDebounce = (value, delay) => {
    const [debounceValue, setDebounceValue] = useState(value);

    useEffect(() => {
        const timer = setTimeout(() => {
            setDebounceValue(value);
        }, delay);

        return () => {
            clearTimeout(timer);
        };
    }, [value, delay]);

    return debounceValue;
};