Question

我正在使用React native来显示来自访存API的数据。但是当数据更新时，它仍然显示旧数据。我很困惑如何在代码中进行下拉刷新。

class YourActivitiesScreen extends Component{
    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    componentDidMount(){
        AsyncStorage.getItem('id_token').then(this.getData)
    }
    getData=(token)=>{
        console.log(token)
       fetch('http://192.168.0.1:8887/api/auth/activities/your',{
            method: 'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' +token,
            },
        })
        .then((response) => response.json())

        .then((res) => {
            if(res.yourActivity)
            {
                let yourActivity = res.yourActivity
                this.setState({activitiesList: yourActivity})
            }
        })
        .catch((e) => console.log('Error: ', e))
        }
        renderItem = (item) => {
            return (
              <TouchableOpacity
                onPress={() => 
                  this.props.navigation.navigate('Details',{activity: item})
                }
              >
                <View style={styles.item}>
                  <Text style={styles.itemtext}>{item.name} </Text>
                </View>
              </TouchableOpacity>
            );
          }
    render(){
        const listActivities = this.state.activitiesList

        return (
                <View stlye={styles.container}>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                            style={styles.list}
                        />
                    </SafeAreaView>
                </View>
        )
        }
}

我是否需要做一些事情以使我在执行下拉动作时再次运行componentDidMount？如果可以，有人可以向我解释该怎么做？

Answer 1

请尝试在FlatList中使用onRefresh道具。参考：https://reactnative.dev/docs/flatlist#onrefresh 注意：在FlatList中使用refreshing时，请确保正确设置onRefresh属性。

Implement pull to refresh FlatList

Answer 2

每次更新数据时，都必须使用extraData FlatList道具。

extraData

一个标记属性，用于告诉列表重新呈现（因为它实现了PureComponent）。如果您的renderItem，Header，Footer等函数中的任何一个都依赖于data道具之外的任何东西，请将其粘贴在这里并一视同仁。

使用extraData对象设置activitiesList道具：

render(){
  const listActivities = this.state.activitiesList

  return (
    <View stlye={styles.container}>
      <SafeAreaView>
        <FlatList
          data={listActivities}
          extraData={listActivities}
          renderItem={({ item }) => this.renderItem(item)}
          keyExtractor={item => item.id}
          style={styles.list}
        />
      </SafeAreaView>
    </View>
  )
}

反应本地下拉刷新以获取数据

2 个答案:

`extraData`