Question

我的反应原生应用程序中出现了类似错误的红色屏幕。

当我在设备（真实设备或模拟器）中禁用互联网连接或任何类型的服务器错误时，会发生此错误。

我正在关注下一个文档信息，以便用apollo“处理”错误并做出本机反应：

https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-error

在我的代码中有这样的东西：

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    ActivityIndicator,
    View,
    FlatList,
    TouchableHighlight,
    TextInput,
    Button,
} from 'react-native';
import PropTypes from 'prop-types';
import { graphql, compose } from 'react-apollo';
import ZONES_QUERY from '../graphql/zones.query'


class ZonesScreen extends Component {


    render() {
        const { zones, loading, error } = this.props;


        if (loading) {
            return (
                <ActivityIndicator style={styles.activityIndicator} size='large' />
            )
        } else if (error) {
            return (
                <View style={styles.container}>
                    <Text>Unexcpeted Error</Text>
                    <Button title="retry" onPress={() => { this.props.refetch() }}></Button>

                </View>

            )
        } else {
            return (
                <View
                    style={styles.container}>
                    <FlatList
                        data={zones}
                        renderItem={({ item }) => ZoneRenderItem(item)}
                        keyExtractor={this.keyExtractor}

                    />
                </View>
            )
        }
    }

    //HELPER FUNCTIONS

    keyExtractor = item => item._id;
}

ZonesScreen.propTypes = {
    refetch: PropTypes.func,
}


const zonesQuery = graphql(ZONES_QUERY, {
    options: {
        forceFetch: true,
        fetchPolicy: 'network-only',
        notifyOnNetworkStatusChange: true,
    },
    props: ({ data: { loading, getRoutes, error, refetch } }) => ({
        loading,
        zones: getRoutes,
        refetch,
        error,
    }),
})



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#eee',
    },
    activityIndicator: {
        flex: 1,
        justifyContent: 'center',
    },
});

export default compose(
    zonesQuery,
)(ZonesScreen)

我的apollo客户端配置有这样的东西：

const errorLink = onError(({ graphQLErrors, networkError}) => {
    console.log("ERROR: " +networkError)    
})

const client = new ApolloClient({
    link: concat(errorLink, httpLink),
    cache: new InMemoryCache(),
});

我有两个屏幕。

屏幕A：它包含一个按钮进入屏幕B. 屏幕B：包含区域列表（此信息从服务器获取）。

重现此错误的步骤是下一步：

- 我打开了应用。（我看到屏幕A）。我从设备禁用了网络连接，我点击按钮进入屏幕B.
屏幕B显示错误消息。这在我的代码中处理：

否则if（error）{}

这是预期的行为，但是当我通过按导航栏/工具栏中的后退按钮返回到屏幕A.红屏正在显现。

我不知道我错过了什么，

任何帮助都是好的，提前谢谢。

我正在使用

“react-native-router-flux”：“4.0.0-beta.27”

“react-apollo”：“2.0.4”，

console.error：“未处理的错误”网络错误：网络请求失败

0 个答案: