onEndReached для плоского списка вызывается бесконечно [React Native]

Question

Я пытаюсь разработать свое первое приложение с ReactNative с Expo. Но у меня есть проблема с FlatList, компоненты делают бесконечный вызов, но я не в конце представления. И вторая проблема, может быть, связана с несколькими экранами, и когда я нахожусь на другом экране, бесконечный вызов API не останавливается ..

Идея?

код:

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import * as WebBrowser from 'expo-web-browser';
import { RectButton, ScrollView, FlatList } from 'react-native-gesture-handler';
import UserRankingList from '../components/UserRankingList';

export default class RankingsScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      users: []
    };

    console.log("constructor")
  }

  componentDidMount() {
    console.log('componentDidMount')
    // Toggle the state every second
    this.getUsers(0)
  }

  getUsers(page) {
    console.log('getUsers')
    console.log('make request with page ' + page)
    return fetch('https://myapi/users/' + page + '/10/', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Instance': 'myinstance'
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        let users = this.state.users
        this.setState({
          loading: false,
          users: [...this.state.users, ...responseJson]
         })
      })
      .catch(error => {
        console.error(error);
      });
  }

  loadMoreUser() {
    console.log('loadMoreUser')
    if (this.state.users.length >= 10 && (this.state.users.length % 10) === 0 && !this.state.loading) {
      let page = this.state.users.length / 10
      this.getUsers(page)
    }
  }

  render() {
    console.log('render')

    return (
      <View>
        <FlatList
          contentContainerStyle={{flexGrow:1}}
          data={this.state.users}
          refreshing={this.state.loading}
          keyExtractor={(item) => item.userid}
          onEndReached={this.loadMoreUser()}
          onEndReachedThreshold={0.1}
          renderItem={({ item }) => (
            <UserRankingList user={item}/>
          )}
          />
      </View>
    );
  }
}



function getRanking() {
  return fetch('https://myapi/users/0/10/', {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Instance': 'myinstance'
    }
  })
    .then(response => response.json())
    .then(responseJson => {
      console.log(responseJson)
      return responseJson;
    })
    .catch(error => {
      console.error(error);
    });
}

И вывод:

конструктор

рендер

loadMoreUser

componentDidMount

getUsers

сделать запрос со страницей 0

render

loadMoreUser

getUsers

сделать запрос со страницей 1

render

loadMoreUser

getUsers

сделать запрос со страницей 2

render

loadMoreUser

getUsers

сделать запрос со страницей 3

сделать

loadMoreUser

getUsers

сделать запрос со страницей 4

Answer 1

Вы должны использовать функцию стрелки.

Вместо:

onEndReached={this.loadMoreUser()}

Используйте это:

onEndReached={ () => { this.loadMoreUser() } }

Как и вам, я должен прочитать немного больше документация.