在主屏幕中，我从 API 获取数据“歌曲”并将其保存在“大数组”状态中。我FlatList用来渲染它，所以它渲染得很好，但我的卷轴太长了！

所以在dataFlatList props中，我像这样对数组进行切片

<FlatList
   data={songs.slice(0,9)}
   ...
/>

它按预期呈现 10 首歌曲：D 但我想在滚动到结尾时添加更多加载

我的想法是在状态中添加一个标志，例如

state={
   page: 10
}


<FlatList
      data={songs.slice(0,this.state.page)}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={0}
       ...
/>


handleLoadMore = () => {
this.state.songs.length <= this.state.page ? this.setState({page: this.state.page + 10, loading: true}) : null
  };

那么还有什么其他想法我该如何处理这种情况？

编辑

完整的 FlatList 代码片段

  // recent Songs FlatList
  _renderItem = ({item, index}) => {
    const {recent_songs} = this.state;
    return (
      <TouchableNativeFeed
        key={item.id}
        onPress={() => {
          this.props.saveSongs(recent_songs, index);
          this.props.isPlaying(true);
          this.props.isPauseTrigger(!this.props.isPauseTrigger);
        }}
        background={TouchableNativeFeedback.Ripple('white')}
        delayPressIn={0}
        useForeground>
        <Card style={styles.card} noShadow={true}>
          <FastImage
            source={{uri: item.img}}
            resizeMode={FastImage.resizeMode.cover}
            style={styles.cardImg}
          />
          <Body style={styles.cardItem}>
            <View style={styles.radioCardName}>
              <View style={styles.cardViewFlex}>
                <Text
                  lineBreakMode="tail"
                  ellipsizeMode="tail"
                  numberOfLines={1}
                  style={styles.text}>
                  {item.name}
                </Text>
              </View>
            </View>
          </Body>
        </Card>
      </TouchableNativeFeed>
    );
  };


{/* Recent Songs Here*/}
              <View style={{marginVertical: 10}}>
                <FlatList
                  style={{flex: 1}}
                  horizontal={true}
                  showsHorizontalScrollIndicator={false}
                  data={recent_songs.slice(0, 10)}
                  contentContainerStyle={{flexGrow: 1}}
                  ListEmptyComponent={<EmptyList />}
                  keyExtractor={(track, index) => track.id.toString()}
                  initialNumToRender={10}
                  renderItem={this._renderItem}
                />
              </View>

constructor(props) { super(props); this.state = { ... itemPerPage : 10 currentPage : 1, // we keep a track inside the state on each page we are for pagination songs:[], // contain the songs used by flatlist to render allSongs : [ ] // contain all the songs returned by api } } async componentDidMount() { // get the songs from api let allSongs = await GetSONGS(); this.setState({ allSongs , songs: allSongs.slice(0,this.state.currentPage*this.state.itemPerPage ) }); } handleLoadMore = async() => { this.setState({ songs: [ ...this.state.songs , allSongs.slice(this.state.currentPage*this.state.itemPerPage,(this.state.currentPage+1)*this.state.itemPerPage ) ] , // concat the old and new data together currentPage : this.state.currentPage +1 }) } render(){ return( <FlatList data={this.state.songs} keyExtractor={(item, index) => index.toString()} initialNumToRender={10} // how many item to display first onEndReachedThreshold={5} // so when you are at 5 pixel from the bottom react run onEndReached function onEndReached={() => { this.handleLoadMore(); }} /> ) }

如果我的 API 没有分页，如何添加加载更多功能 - react-native？

编辑