Reactjs 如何限制平面列表中的项目并添加更多负载？

我的技能是基本的，我是React native的新手，我想做的是将帖子限制在12个以内，当用户滚动时自动加载更多帖子

我的代码：

export default class Posts extends Component {
constructor(props) {
super(props);
this.state = {
  isLoading: true,};}

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataPosts: responseJson
       }, function() {
       });
     })
     .catch((error) => {
     });}

render() {
return (
    <FlatList
      data={ this.state.dataPosts }
      numColumns={2}
      renderItem={({item}) => 
            <TouchableOpacity activeOpacity={1} style={{flex: 1}}>
            <View style={{margin: 5, marginLeft: 4}}>
            <ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}}>
                <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.8)']}>
                        <Text numberOfLines={2}>{item.post_title}</Text>
                </LinearGradient>
            </ImageBackground>
            </View>
            </TouchableOpacity>
}
    keyExtractor={(item, index) => index}

    />
);}}

导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoading:true，}；}
componentDidMount（）{
返回fetch（ConfigApp.URL+'json/data\u posts.php'）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据发布：responseJson
}，函数（）{
});
})
.catch（（错误）=>{
});}
render（）{
返回(
{item.post_title}
}
keyExtractor={（项，索引）=>index}
/>
);}}
< /代码> 如果您需要将已存在的数据从已有的12个块中添加到现有的列表中，则可以考虑以下策略：使用“代码> OnEdTimeNo/<代码>和<代码> OnEntEnthult处理卷并同时添加12条记录。

在构造函数中将当前
页面
编号设置为
0

constructor(props){
  super(props);
  this.state = {
    ... ,
    page: 0,
    posts: []
  }
}

在
componentDidMount
中，您需要从服务器中提取所有数据并将其存储在本地状态（您当前正在执行），然后调用函数读取前12条记录

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
   .then((response) => response.json())
   .then((responseJson) => {
     this.setState({
       isLoading: false,
       page: 0,
       dataPosts: responseJson
     }, function() {
       // call the function to pull initial 12 records
       this.addRecords(0);
     });
   })
   .catch((error) => {
   });
}

现在添加将从
this.state.dataPosts添加记录的函数

addRecords = (page) => {
  // assuming this.state.dataPosts hold all the records
  const newRecords = []
  for(var i = page * 12, il = i + 12; i < il && i < 
    this.state.dataPosts.length; i++){
    newRecords.push(this.state.dataPosts[i]);
  }
  this.setState({
    posts: [...this.state.posts, ...newRecords]
  });
}

渲染功能

render() {
  return(
    ...
    <FlatList
       ...
       data={this.state.posts}
       renderItem={({item}) => ... }
       keyExtractor={(item, index) => index}
       onEndReached={this.onScrollHandler}
       onEndThreshold={0}
    />
    ...
  );
}

render（）{
返回(
...
... }
keyExtractor={（项，索引）=>index}
onEndReached={this.onScrollHandler}
onEndThreshold={0}
/>
...
);
}

希望这会有帮助
 在数据源中获取jsondata时，可以添加slice（start，end）方法。这个把戏可以解决你的问题

dataPosts:responseJson.slice（0,10）将此行替换为您的行。
您想从服务器加载更多数据，还是一次加载所有数据，最初只显示其中的12个？是的，第二个选项初始数据长度是多少，api调用下一组项目是否有任何限制？我找到了这个库，但是我不知道如何使用它我测试了它，但是我得到了这个错误类型错误：undefined不是一个对象计算“\u this.state.records[i]”我的错误，它将是
dataPosts
。我将更新答案。我已经更新了答案，请检查
addRecords
。现在我得到了这个错误：TypeError:Array.from需要像object not null或undefined这样的数组。我不确定您从后端获得的是什么数据，请确认
this.state.dataPosts
是一个数组。
render() {
  return(
    ...
    <FlatList
       ...
       data={this.state.posts}
       renderItem={({item}) => ... }
       keyExtractor={(item, index) => index}
       onEndReached={this.onScrollHandler}
       onEndThreshold={0}
    />
    ...
  );
}