react-native - 在 react-native 中刷新数据

Question

嗨，所以我想在下拉时刷新数据，但我不知道该怎么做。这是我的代码：

async componentDidMount() {
    this.getData();
  }

  async getData(){
    const url = "SomeUrl";
    await fetch(url) 
    .then(res => res.json())
    .then(res => {
      this.setState({
        dataSource: res
      });
    })
    .catch(error => {
      console.log("get data error:" + error);
    });
  }

 <SafeAreaView style={{ flex:1 }}>
     <View style={styles.main_container}>
        <FlatList style={styles.flatList}
          data={this.state.dataSource}
          extraData = {this.state}
          keyExtractor={(item, index) => item.MembreId}
          renderItem={(item) => <UserItem user={item} displayDetailForUser={this._displayDetailForUser} />}
          numColumns={numColumns}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh} />
     </View>
 </SafeAreaView>

所以我在这里获取数据dataSource。我已经尝试过了，但它正在无休止地加载。我是否还需dataSource要先擦除以前的数据？

handleRefresh = () => {
    this.setState (
      {
        refreshing: true,
      },
      () => {
        setTimeout(() => {this.getData()}, 1000)
      }
    );
  };

标签： react-native

Answer 1

数据返回后，您似乎没有将刷新设置为 false。试试这个getData：

async getData(){
  const url = "SomeUrl";
  await fetch(url) 
  .then(res => res.json())
  .then(res => {
    this.setState({
      dataSource: res,
      refreshing: false,
    });
  })
  .catch(error => {
    console.log("get data error:" + error);
  });
}