在FlatList中进行拉式刷新时，refreshControl发送了两个请求，该请求仅发送一次

Question

FlatList中的拉刷新同时发送两个请求，这些请求只能发送一次

下面是package.json：

{
  "name": "githubHelper",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.60.4",
    "react-native-elements": "^1.1.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.2.0",
    "react-native-scrollable-tab-view": "^0.10.0",
    "react-native-tab-navigator": "^0.3.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.1"
  },
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/runtime": "7.5.5",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.8.0",
    "eslint": "6.1.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.55.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

下面是相关代码：

    render() {
        return(
           <FlatList
            ItemSeparatorComponent={this.renderSeparator}
            keyExtractor={this.keyExtractor}
            data={this.state.data}
            renderItem={this.renderItem}
            onEndReached={this.handleLoadMore}
            onEndReachedThreshold={0.1}
            ListFooterComponent={this.renderFooterHandler}
            onRefresh={this.refreshingHandler}
            refreshing={this.state.refreshing}
            refreshControl = {
                <RefreshControl
                    refreshing={this.state.loading}
                    onRefresh={this.refreshingHandler}
                />
            }

在FlatList中进行拉动刷新时，预期请求仅发送一次

=================

我找到了修改它的方法，像这样，我评论了这三行内容，然后到现在为止，Pull Refreshing可以正常工作，但是不知道与页脚相关的代码会对它产生影响，下面是代码：

render() {
        return(
           <FlatList
            ItemSeparatorComponent={this.renderSeparator}
            keyExtractor={this.keyExtractor}
            data={this.state.data}
            renderItem={this.renderItem}
            //onEndReached={this.handleLoadMore}
            //onEndReachedThreshold={0.1}
            //ListFooterComponent={this.renderFooterHandler}
            onRefresh={this.refreshingHandler}
            refreshing={this.state.refreshing}
            refreshControl = {
                <RefreshControl
                    refreshing={this.state.loading}
                    onRefresh={this.refreshingHandler}
                />
            }

           />

Answer 1

more details of the problem

该屏幕显示了该问题的更多详细信息：

Answer 2

您可能会遇到这种类型的问题，因为您两次定义了onRefresh，可以在FlatList或RefreshControl中使用它。

这是解决方案！ FlatList也有一个名为refreshControl的道具，如ListView，但我没有对其进行测试！像这样：

refreshControl={
    <RefreshControl
        colors={["#9Bd35A", "#689F38"]}
        refreshing={this.state.loading}
        onRefresh={this.refreshingHandler}
    />
}