Блог

Если данные, просматриваемые в плоском списке, изменены с помощью getData в функции поиска, а не onEndReached, после повторного отображения. onEndReached не вызывается. Почему все так происходит?

onEndReached нормально работает во время первого рендеринга. Однако в начальном состоянии визуализации onEndReached работает один раз, значение данных отображается снова после выполнения поиска, и с этого момента onEndReached не реагирует сам по себе. Из-за этой проблемы я трачу 6 часов. Пожалуйста, заполните мои навыки!

Мой исходный код таков ..

 
export const WordSearch = () => {
    const [data,setData] = useState();
    const [isLoading, setIsLoading] = useState(false);

    const [dataCount, setDataCount] = useState(0);
    const [searchType, setSearchType] = useState('');
    const [keyword, setKeyword] = useState('');


    const getData = () => {
        setIsLoading(true);
        const sendData = {
            "iDisplayStart":dataCount,
            "iDisplayLength":LIMIT,
            "iSortCol_0":1,
            "sSortDir_0":"asc",
            "keyword":keyword === '' ? '' : keyword,
            "searchType":searchType
        };
        console.log('SendData ::: '  JSON.stringify(sendData));
        axios.post(baseURL '/mobile/word/list',sendData, {headers:headers})
            .then((response) => {
                if(dataCount==0){
                    setData(response.data.data);
                }else {
                    const resultData = data.concat(response.data.data);
                    setData(resultData);

                }
                setIsLoading(false);


            })
            .catch((error) => {
                console.log(error);
                setIsLoading(false);
            });
    }


    const search = (isSearch) => {
        if(isLoading){
            return;
        }
        if(isSearch) {
            if (dataCount == 0) {
                getData();
            } else {
                setDataCount(0);
            }
        }else{
            setDataCount(dataCount LIMIT);
        }
        return;
    };

    useEffect(()=>{
        if(isLoading){
            return;
        }
        getData();
    },[dataCount]);


    return(
    
            <View style={Layout.wrap}>
                
                <Search searchType={SEARCH_TYPE} setSearchType={setSearchType} setKeyword={setKeyword} searchEvent={search}/>

                   <FlatList
                       style={Layout.content}
                       data={data}
                       renderItem={renderItem}
                       keyExtractor={(item) => item.wordSeq}
                       onEndReached={()=>{
                           console.log("onEndReached !!!");
                           if(isScrolling.current){
                               search(false);
                           }
                       }}
                       onEndReachedThreshold={0.3}
                       onScrollEndDrag={()=>{
                           isScrolling.current = false;
                       }}
                       onScrollBeginDrag={()=>{
                           isScrolling.current = true
                       }}
                   />

               
            </View>
    
    );
}