FlatList - 項目を残さずにさらにフェッチするときにアイテムをループする - 反応ネイティブ

Question

私はapiからデータを取り出して15個の項目ごとにさらにデータをフェッチしています。しかし、それ以上データが残っていない場合でも、それ以上フェッチしようとしていて、次のアイテムが存在しない、または0からアイテムをループするというエラーを出します。ここに私のコードは次のとおりです。

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

ただ何のアイテムが

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

に

変更状態を残していない旨の通知のためのparamsは、より多くのこのような

_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, 
     }); 
    }); 
    } 

がにロジックを追加フェッチ作る作りますonEndReached

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