Получение данных с нескольких страниц API в React Native

Question

Я пытаюсь получить информацию из API видеоигры и поместить ее в свой список. Однако API разделен на несколько страниц (которых я не знаю, сколько их).

Я пробовал это решение: Как получать данные с нескольких страниц?

Затем я попробовал другое решение (фрагмент кода ниже обновлен), но он выдает ошибку:

Превышена максимальная глубина обновления ...

Вероятно, потому что это никогда не перестает обновлять мою переменную currentPage

После нескольких часов отладки я сдался.

Вот мой файл:

import { Card, CardItem } from "native-base";

export default class App extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
      currentPage: 1
    };
  }
 
  getUserFromApi = () => {

      return fetch('https://api.rawg.io/api/games?page=' + this.state.currentPage +'&platforms=18', {
        "method": "GET",
        "headers": {
          "x-rapidapi-host": "rawg-video-games-database.p.rapidapi.com",
          "x-rapidapi-key": "495a18eab9msh50938d62f12fc40p1a3b83jsnac8ffeb4469f"
        }
      })
        .then(response => response.json())
        .then(responseJson => {
          this.setState({
            isLoading: false,
            dataSource: this.state.dataSource.concat(responseJson.results)
          });
        })
        .catch(error => console.log(error));
    
    
  };

    componentDidMount() {
      this.getUserFromApi();

    }
  

    render() {

      const { isLoaded, items } = this.state;
      
    
        if (this.state.isLoading) {
          return (
            <View style={styles.progress}>
              <ActivityIndicator size="large" color="#01CBC6" />
            </View>
          );
        }

        return (
          <FlatList
            data={this.state.dataSource}
            onEndReached={ this.setState({ currentPage: this.state.currentPage + 1 }) } 

Answer 1

Решение 1

Итерировать по API, увеличивая значение currentPage до тех пор, пока не будут возвращены результаты (следовательно, указывающие на конец списка).

function fetchAllGamesFromAPI() {
    let endOfList = false;
    let items = [];
    let currentPage = 1;

    while(endOfList === false) {
        const result = fetchGamesFromAPI(currentPage);

        endOfList = !result.length;
        items = [...items, ...result];
        currentPage += 1;
    }
    
    return items;
}

Конечно, это может занять невероятно много времени из-за того, что вы (don't know how many there are)., что приводит к

Решению 2

Извлеките дополнительные данные, когда пользователь прокручивает список до конца (или ближе к нему) с помощью API, предоставляемый FlatList. https://reactnative.dev/docs/flatlist#onendreached

const onEndReached = () => {
    this.setState({
        currentPage = currentPage + 1;
    })
    
    fetchGamesFromAPI(currentPage);
};

<FlatList
    ...
    onEndReached={ onEndReached } />