Javascript ONEDREACHED导致多个项目显示在listview上

最后，我的listview上有多个重复项，因为出于某种原因，使用相同的参数'page=1'多次调用api，并且OneDreached在不滚动的情况下自动启动

我试过这样的方法：

 componentDidMount() {
        this.fetchCategories();
 }


fetchCategories() {
   this.setState({isLoading: true});
   categoryApi.getOne(this.state.page).then(response => {
       if (response.data) {
           this.setState({
               categories: this.state.categories.concat(response.data.data),
               isLoading: false,
           });
       } else {
           this.setState({isLoading: false});
           Alert.alert(
               'Something wrong happened!',
               'My Alert Msg',
               [],
               {cancelable: true}
           )
       }
   }); }

this.state = {
     isLoading: false,
     categories: [],
     page: 1,
};

showMore = () => {
    this.setState({page: this.state.page + 1});
    this.fetchCategories();
}; 



<FlatList
  data={this.state.categories}
  extraData={this.state}
  renderItem={(rowData) => <CategoryItem navigate={navigate} item={rowData}/>}
  onEndReached={this.showMore}
  keyExtractor={(item, index) => index}
 />

我仍然可以看到page=1的重复项，api仍然被参数page=1多次调用

---

有人知道我怎样才能避免这样的事情吗？

你必须使用

onEndReached threshold

和

onEndReached

来防止这种奇怪的行为发生

如报告中所述

onEndReached

：当滚动位置在渲染内容的

onEndReached阈值内时调用一次

因此，您可以将该值设置为
onEndReachedThreshold={0.5}

0.5
将在内容结尾位于列表可见长度的一半以内时触发
onedreached

要删除重复项，需要将它们合并为具有或不具有唯一值的两个阵列

因此，与往常一样，您可以使用
es6扩展运算符

范例

let arr1 = [1, 2, 3];
let arr2 = [3, 5, 6];

let deDupeIt = (...arrs) => [ ...new Set( [].concat(...arrs) ) ];

let dedupedArrays = deDupeIt(arr1, arr2)
console.log(dedupedArrays)

在您的例子中，在某处定义函数并将其称为

this.setState({
               categories: deDupeIt(this.state.categories, response.data.data),
               isLoading: false,
           });

注意：

如果您使用的是代码段的第二部分
应该使用
prevState.page+1
，而不是
prevState+1
您是否尝试过
onEndReachedThreshold={0.5}
？@PritishVaidya看起来像是onEndReachedThreshold={0.5}解决了触发本身的问题，但当我尝试滚动时，仍然可以在列表上看到重复项，似乎我的api是在页面状态改变之前被调用的，所以页面值基本上没有及时增加！您试图在此处合并数据
this.state.categories.concat（response.data.data）
因此它将其添加到数组中，而您应该合并数组。因此，您说的是，而不是.concat（），我应该使用.merge（）？您说的是，而不是类别：this.state.categories.concat（response.data.data），我应该让deDupeIt=（…arrs）=>[…新设置（[].concat（…arrs））]；让dedupedArray=deDupeIt（this.state.categories，response.data.data）this.state.categories.concat（dedupedArray）？更新后，无论您在哪里进行
concating
我按照您的建议做了同样的事情，我仍然可以看到重复的项。您可以为这些项添加
响应对象吗，包含一些重复的
，我认为这可能是项中嵌套重复对象的问题。我认为问题根本不在于concat，问题在于使用相同的参数页调用了两次api调用：1
this.setState({
               categories: deDupeIt(this.state.categories, response.data.data),
               isLoading: false,
           });