从抽屉打开的刷新组件(React Navigation)

Question

编辑：现在将异步调用放置在axios.all()呼叫中以加快过程。问题仍然相同。

在我的应用中，按在登录屏幕上登录时，将删除设备上存储的令牌。

login.js ：

    async resetKey() {
        try {
            await AsyncStorage.removeItem('@MySuperStore:key');
            this.setState({
                token: null,
                loggedIn: false,
            });
        } catch (error) {
            this.setState({
                token: null,
                loggedIn: false,
            });
        }
    }

现在，我想在另一个页面中使用这个事实，在该页面上，我将渲染基于Prop loggedIn。如果登录，则true，我正在渲染活动，并且是绿色或红色框，指示用户是否已注册该活动。这都是相当微不足道的，而且工作正常：

    if (this.state.loggedIn) {
        return (
            <ScrollView refreshControl={
                <RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh.bind(this)} />
            }>
                <Loader loading={this.state.loading} />
                <Text style={styles.foodHeader}>Activiteiten</Text>
                {this.state.activities.map((activity) => (
                    <TouchableOpacity key={activity.id} onPress={() => this.onOpenActivity(activity)} style={styles.foodActivityField}>
                        <Text>{`${activity.name}`}</Text>
                        <View>
                            {this.showRegistered(activity.id) ? registered : notRegistered}
                        </View>
                    </TouchableOpacity>
                ))}
                <Text style={styles.foodHeader}>Eten</Text>
                {this.state.foods.map((food) => (
                    <TouchableOpacity key={food.id} onPress={() => this.onOpenFood(food)} style={styles.foodActivityField}>
                        <Text>{`${food.name}`}</Text>
                        <View>
                            {this.showRegistered(food.id) ? registered : notRegistered}
                        </View>
                    </TouchableOpacity>
                ))}
            </ScrollView>
        );
    }

但是，当用户刚刚登录时，不应显示这一点。在这种情况下，它应该显示一个简单的文字，说"您必须登录以查看活动"。

    else {
        {/** User is not logged in */ }
        return (
            <ScrollView refreshControl={
                <RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh.bind(this)}  />
            }>
                <Loader loading={this.state.loading} />
                <Text>You have to be logged in to view activities</Text>
            </ScrollView>
        );
    }

registered，notRegistered和onOpenFood和onOpenActivity功能的渲染已被排除在外。对于刷新的功能以及API的工作呼叫，我有此代码（API调用的功能在单独的文件中，这些是基本的Axios请求，GET和POST）：

constructor(props) {
    super(props);
    this.state = {
        loading: true,
        refreshing: false,
        activities: [],
        foods: [],
        registered: []
    }
    this.getData
}
/* Handles the action necessary to refresh */
onRefresh = () => {
    this.setState({ refreshing: true });
    this.getData().then(() => {
        this.setState({ refreshing: false });
    });
}
async componentDidMount() {
    // Do the necessary API calls
    this.getData();
}
getData = async () => {
    this.setState({loading: true})
    /* Get token from storage */
    try {
        console.log('trying to get key...')
        const value = await AsyncStorage.getItem('@MySuperStore:key');
        if (value) {
            this.setState({
                token: value,
                loggedIn: true
            });
            /* Retrieve activities */
            const activities = await getActivities();
            this.setState({ activities });
            /* Retrieve food */
            const foods = await getFood();
            this.setState({ foods });
            /* Retrieve the activity ID's the user is registered for */
            const registered = await getRegistered(this.state.token);
            this.setState({ registered });
            this.setState({ loading: false })
        } else {
            this.setState({
                token: null,
                loggedIn: false,
                loading: false
            });
        }
    } catch (error) {
        this.setState({
            token: null,
            loggedIn: false
        });
        console.log("help")
    }

}

现在问题在于，在页面重新打开时，this.state.registered更改未见，导致页面的显示不正确。刷新页面有效，因为整个州都重置。如何修复？是否有一种方法可以在再次加载页面时调用onRefresh？该页面以及函数onOpenFood和onOpenActivity导航到stacknavigator的一部分，其本身就是drawernavigator的一部分（react-navigation 3.3.2）。

Answer 1

如果有人偶然发现这个问题，您可能想查看类似于使用效果的挂钩与侦听器的结合。在这种情况下，看起来像这样;

useEffect(()=> {
  const unsubscribe = navigation.addListener('focus', () => {
    onRefresh();
  });
  return unsubscribe;
}, [navigation]);

，每当页面上的焦点返回并完成导航道具中的某些东西时，请确保调用OnRefresh函数。这是一个旧问题，所以我没有在代码中对此进行调整，但是在较新的项目中，这似乎很好