javascript - 如果 React Native 中没有互联网连接，则获取存储数据

Question

我创建了一个从 URL(对象数组)检索数据并将其显示在 FlatList 中的应用程序。

目前，当启动应用程序时，数据会正确显示(它们是异步检索的)。如果我切换到飞行模式，会出现“无互联网连接”消息，但不会显示我的 AsyncStorage 数据(应用程序的背景为白色)。如果我禁用飞行模式，我的数据将再次显示。

class MontanteTab extends Component {
    state = {
        errors: null,
        isLoading: true,
        isConnected: true,
        refreshing: false,
        pronostics: [],
    };

    async componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);

        if (this.state.isConnected) {
            await this.loadPronostics();
        }

        try {
            this.setState({pronostics: JSON.parse(await AsyncStorage.getItem(Keys.pronosticsMontante))});
        } catch (error) {
            console.log(error);
        }
    }

    handleConnectivityChange = isConnected => {
        console.log(isConnected);
        this.setState({isConnected: isConnected});
    };

    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }

    onRefresh = () => {
        console.log('refreshing...');
        this.setState({refreshing: true});
        this.loadPronostics();
        this.setState({refreshing: false});
        console.log('refreshed...');
    };

    loadPronostics() {
        this.setState({isLoading: true, error: null});

        return axios.get(AppConfig.apiUrl + 'montante').then(async response => {
            await AsyncStorage.setItem(Keys.pronosticsMontante, JSON.stringify(response.data));
            this.setState({isLoading: false});
        }).catch(error => {
            this.setState({isLoading: false, error: error.response});
            console.log(error);
        });
    }

    render() {
        if (this.state.isLoading === true) {
            return (
                <View style={{flex: 1, padding: 20}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        if (!this.state.isConnected) {
            return (
                <OfflineNotice/>
            )
        }

        return (
            <View>
                <FlatList
                    data={this.state.pronostics}
                    extraData={this.state.pronostics}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh.bind(this)}
                            title="Glisser pour rafraîchir"
                            tintColor="#fff"
                            titleColor="#fff"
                        />
                    }
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item}) => (
                        <ListItem
                            key={item.id}
                            roundAvatar
                            badge={{
                                value: item.statut,
                                textStyle: {color: '#fff'},
                                containerStyle: {marginRight: 0, backgroundColor: item.couleur}
                            }}
                            avatar={<Image
                                source={{uri: AppConfig.imagesPronosticsUrl + item.image}}
                                style={{borderRadius: 50, height: 50, width: 50, overflow: 'hidden'}}/>}
                            title={item.competition}
                            subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
                            onPress={() => this.props.navigation.navigate('PronosticsDetails', {
                                item,
                            })}
                        />
                    )}
                />
            </View>
        );
    }
}

当没有更多互联网连接时，如何显示我的 AsyncStorage 数据？

我还有一个额外的问题:当我在我的 API 中添加新数据并拉取刷新我的 FlatList 时，我的 FlatList 没有更新。为什么请？

Answer 1

如果你想在没有互联网连接但将其存储在本地时显示平面列表，请替换:

if (!this.state.isConnected) {
    return (
        <OfflineNotice/>
    )
}

与:

if (!this.state.isConnected && this.state.pronostics.length === 0) {
    return (
        <OfflineNotice/>
    )
}

并且 React View 在状态更改后刷新，例如带有 this.setState 的 View .如果您想在“拉取”数据后手动强制更新，请使用 this.forceUpdate .