Javascript 如果React Native中没有internet连接，则获取存储数据

我创建了一个从URL（一个对象数组）检索数据并在FlatList中显示的应用程序

当前，启动应用程序时，数据显示正确（异步检索）。如果切换到飞行模式，则会显示消息“无internet连接”，但不会显示异步存储的数据（应用程序的背景为白色）。如果我禁用飞行模式，我的数据将再次显示

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

类MontanteTab扩展组件{
状态={
错误：null，
孤岛加载：是的，
断开连接：是的，
刷新：错，
原声学：[]，
};
异步组件didmount（）{
NetInfo.isConnected.addEventListener（'connectionChange'，this.handleConnectivityChange）；
如果（此.state.isConnected）{
等待此消息。loadPronostics（）；
}
试一试{
this.setState（{pronostics:JSON.parse（wait AsyncStorage.getItem（Keys.pronosticsMontante））}）；
}捕获（错误）{
console.log（错误）；
}
}
handleConnectivityChange=isConnected=>{
console.log（未连接）；
this.setState（{isConnected:isConnected}）；
};
组件将卸载（）{
NetInfo.isConnected.removeEventListener（'connectionChange'，this.handleConnectivityChange）；
}
onRefresh=（）=>{
console.log（'刷新…'）；
this.setState（{刷新：true}）；
这是loadPronostics（）；
this.setState（{刷新：false}）；
log（'refreshed…'）；
};
loadPronostics（）{
this.setState（{isLoading:true，error:null}）；
返回axios.get（AppConfig.apiUrl+'montante'）。然后（异步响应=>{
等待AsyncStorage.setItem（Keys.pronosticsMontante，JSON.stringify（response.data））；
this.setState（{isLoading:false}）；
}).catch（错误=>{
this.setState（{isLoading:false，error:error.response}）；
console.log（错误）；
});
}
render（）{
if（this.state.isLoading==true）{
返回(
)
}
如果（！this.state.isConnected）{
返回(
)
}
返回(
index.toString（）}
renderItem={（{item}）=>(
this.props.navigation.navigate（'PronosticsDetails'{
项目,，
})}
/>
)}
/>
);
}
}

当没有更多的internet连接时，如何显示异步存储数据

---

我还有一个额外的问题：当我在我的API中添加新数据并在我的平面列表上进行刷新时，我的平面列表不会更新。为什么请？

如果您想在没有internet连接但本地存储的情况下显示平面列表，请更换：

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

如果（！this.state.isConnected）{
返回(
)
}

与：

if（！this.state.isConnected&&this.state.pronostics.length==0）{
返回(
)
}

---

和在状态更改后刷新视图，例如具有。如果要在“提取”数据后手动强制更新，请使用。

如果要在没有internet连接但在本地存储的情况下显示平面列表，请更换：

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

如果（！this.state.isConnected）{
返回(
)
}

与：

if（！this.state.isConnected&&this.state.pronostics.length==0）{
返回(
)
}

和在状态更改后刷新视图，例如具有。如果要在“提取”数据后手动强制更新，请使用