FlatList-在获取更多内容而没有剩余项目时循环项目-React Native

Question

I am fetching data from the api and fetch more data every 15 items. However, when there is no more data left, it's still trying to fetch more and gives an error that next item doesn't exist or just loops the items from 0. How can I stop fetching the data on the last item from the database? Here is my code:

export default class One extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fetchMore = this._fetchMore.bind(this);
    this.fetchData = this._fetchData.bind(this);
    this.state = {
      isLoading: true,
      isLoadingMore: false,
      _data: null,
      _dataAfter: '',
      accessToken: "",
    };
  }
async componentWillMount() {
try {
      let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN).then(JSON.parse);
      if(!accessToken) {
          this.redirect('login');

      } else {
        this.setState({accessToken: accessToken})

      }
    } catch(error) {
        console.log("Something went wrong");
        this.redirect('login');
    }  

     this.fetchData(responseJson => {
      const data = responseJson;
      this.setState({
        isLoading: false,
        _data: data,
        _dataAfter: responseJson.after,
      });
    });
}    
  _fetchData(callback) {
      const params = this.state._dataAfter !== ''
      ? `&after=${this.state._dataAfter}`
      : '';
    fetch(`https://mywebsite.com/posts?limit=15${params}`,
         {
         method: 'GET',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
           'Authorization': "Bearer " + this.state.accessToken.token,
         }
    })
      .then(response => response.json())
      .then(callback)
      .catch(error => {
        console.error(error);
      });
  }
 _fetchMore() {
    this.fetchData(responseJson => {
      const data = this.state._data.concat(responseJson);
      this.setState({
        isLoadingMore: false,
        _data: data,
        _dataAfter: responseJson.after,
      });
    });
  }

  render() {
      if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" />
        </View>
      );
    } else {
      return (  
        <FlatList
        numColumns={1}
          data={this.state._data}
          renderItem={({item}) => {
            return (
                <View>
                <Text>
                {item.name}
              </Text>
           </View>  
            );
          }}
         onEndReached={() =>
            this.setState({ isLoadingMore: true }, () => this.fetchMore())}
          ListFooterComponent={() => {
            return (
              this.state.isLoadingMore &&
              <View style={{ flex: 1, padding: 10 }}>
                <ActivityIndicator size="small" />
              </View>
            );
          }}
          keyExtractor={(item, index) => index}
        />
      );
  }
}
}

Answer 1

Just make params for notice that no items left

Change state to

this.state = {
  isLastData: false, // this new var
  isLoading: true,
  isLoadingMore: false,
  _data: null,
  _dataAfter: '',
  accessToken: "",
};

Make fetch more like this

_fetchMore() {
    this.fetchData(responseJson => {
      const data = this.state._data.concat(responseJson.children);
      this.setState({
        isLastData: data.length > 0 ? false : true, 
        isLoadingMore: false,
        _data: data,
        _dataAfter: responseJson.after,
      });
    });
  }

Add logic to onEndReached

            onEndReached={
            () => {
                if (! this.state.isLastData) {
                    this.setState({ isLoadingMore: true }, () => this.fetchMore())
                }
            }
        }