Как иметь бесконечную разбивку на страницы в FlatList с помощью хуков в React Native - PullRequest
Новая
       171

Как иметь бесконечную разбивку на страницы в FlatList с помощью хуков в React Native

0 голосов
/ 14 июля 2020

Я загружаю данные только в первый раз, но мне нужна бесконечная разбивка на страницы с помощью хуков, пожалуйста, дайте мне знать, как это можно сделать, в настоящее время я могу получать данные только один раз и не более 

     import React, {useState, useEffect} from 'react';
    import {View, Text, FlatList} from 'react-native';
    
    export default function WatchlistClass() {
      const [watchlistData, setData] = useState({data: [], pageNumber: 1});
      useEffect(() => {
        remoteRequest();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [watchlistData.pageNumber]);
    
      const remoteRequest = () => {
        fetch(`https://abcde/?page=${watchlistData.pageNumber}`, {
          method: 'GET',
          headers: {
            Accept: 'application/json',
            Authorization: '',
          },
        })
          .then((response) => response.json())
          .then((json) => {
            setData({...watchlistData, data: [...json.data.reverse()]});
          })
          .catch((error) => console.error(error));
      };
    
      const loadMore = () => {
        setData({...watchlistData, pageNumber: watchlistData.pageNumber + 1});
      };
    
      return (
        <View>
          <FlatList
            data={watchlistData.data}
            renderItem={({item}) => {
              return <Text>{item.title}</Text>;
            }}
            keyExtractor={(item, index) => {
              item.id.toString();
            }}
            onEndReached={loadMore}
            onEndReachedThreshold={0}
          />
        </View>
      );
    }
...