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

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

Answer 2

尝试在refreshing中使用数据源将this.getData()状态设置为false。

Answer 3

我还有一个问题，当我按下headerRight中的刷新按钮时，如何刷新？我已经尝试过在文档中完成操作的方式，但是没有任何反应。

handleRefresh = () => {
    this.setState (
      {
        refreshing: true,
      },
      () => {
        this.setState({refreshing: false})
        this.getData()
        console.log(this.state.dataSource)
      }
    );
  };

async componentDidMount() {
    this.getData();
    this.props.navigation.setParams({ refresh: this._handleRefresh });
  }

static navigationOptions = ({ navigation }) => {
    return {
      headerRight: () => (
        <View style={{marginLeft: 8, marginRight: 8, flexDirection: 'row', alignItems: 'center' }}>
          <TouchableOpacity style={{marginLeft: 10 }} onPress={ () => {this.handleRefresh()}}>
              <Image style={{ width: 22, height: 22 }} source={require("../Images/refresh.png")} />
          </TouchableOpacity>
        </View>
      ),
    };
  };

刷新react-native

3 个答案: