onEndReached 导致列表视图上显示多个项目

Question

我最终在我的列表视图上重复了多个项目，因为由于某种原因多次使用相同的参数 'page=1' 调用 api，而且 onEndReached 在我不滚动的情况下自行触发。

我尝试过这样的事情：

 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}
 />

我尝试了什么： 将 showMore 更改为：

showMore = () => {
        // console.log("End reached.");
        this.setState(prevState =>({
            page: prevState + 1
        }), () => {
            this.fetchCategories();
        });
}; 

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

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

Answer 1

您必须将onEndReachedThreshold 与onEndReached 结合使用，以防止发生奇怪的行为

如docs中所述

onEndReached ：当滚动位置在渲染内容的onEndReachedThreshold 内时调用一次。

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

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

为了对项目进行重复数据删除，您需要将它们合并为 concat 组合两个具有或不具有唯一值的数组。

因此，像往常一样，您可以使用es6 spread operator

例子

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

注意：

如果您使用的是代码的第二部分 sn-p 应该使用prevState.page + 1 而不是prevState + 1