Мой FlatList не отображается из-за моего SearchFiltered ReactNative - PullRequest
Новая
       30

Мой FlatList не отображается из-за моего SearchFiltered ReactNative

0 голосов
/ 18 июня 2020

Как я могу отобразить свой FlatList на экране, когда я удалил эту строку const [filteredFreelancerList, setFilteredFreelancerList] = useState(freelancers). Списки freelancers будут отображаться на экране. Ниже приведен код моего FlatList и Search. Поиск уже работает. 

<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}
/>

My Search Logi c здесь 

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;
};
...