平面列表上的 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);
    });
}

输出：

constructor

render

loadMoreUser

componentDidMount

getUsers

make request with page 0

render

loadMoreUser

getUsers

make request with page 1

render

loadMoreUser

getUsers

make request with page 2

render

loadMoreUser

getUsers

make request with page 3

render

loadMoreUser

getUsers

make request with page 4

Answer 1

你应该使用箭头函数。

而不是：

onEndReached={this.loadMoreUser()}

使用这个：

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

作为你，我必须多读一点文档。

平面列表上的 onEndReached 无限调用 [React Native]

onEndReached on flatlist invoked endless [React Native]

javascript

reactjs

react-native

redux

react-native-flatlist