AUTH_ERROR 未在自定义数据提供程序上调用

Question

当我使用 react-admin 组件时 <List> <Edit> AUTH_ERROR 在我的 authProvider 中被调用。

但是当我在自定义组件中使用 dataProvider 时，AUTH_ERROR 没有被调用。

如文档中所述，如果任何 API 调用 return 出现任何错误，authProvider 将使用 AUTH_ERROR.

类型捕获它

我正在使用教程中的默认 dataProvider :

const API_URL = process.env.REACT_APP_API_URL;

const convertDataProviderRequestToHTTP = (type, resource, params) => {
    let url = '';
    const token = localStorage.getItem('token');
    const options = {
        headers: new Headers({
            'Accept': 'application/ld+json',
            'Content-Type': 'application/ld+json',
            'Authorization': `Bearer ${token}`,
        }),
    };
    switch (type) {
        case 'GET_GENERAL': {
            url = `${API_URL}/${resource}?${stringify(params)}`;
            break;
        }
        case GET_ONE:
            url = `${API_URL}/${resource}/${params.id}`;
            break;
        case UPDATE:
            url = `${API_URL}/${resource}/${params.id}`;
            options.method = 'PUT';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${API_URL}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        default:
            throw new Error(`Unsupported fetch action type ${type}`);
    }

    return {url, options};
};

const convertHTTPResponseToDataProvider = (response, type, resource, params) => {
    const {json} = response;
    switch (type) {
        case GET_LIST:
        case GET_MANY_REFERENCE:
            let data = json['hydra:member'];
            return {
                data: data,
                total: json['hydra:totalItems'],
            };
        case CREATE:
            return {data: json};
        default:
            return {data: json};
    }
};

export default (type, resource, params) => {
    const {fetchJson} = fetchUtils;
    const {url, options} = convertDataProviderRequestToHTTP(type, resource, params);
    return fetchJson(url, options)
        .then (response => {console.log(response) ; return response})
        .then(response => convertHTTPResponseToDataProvider(response, type, resource, params));
};

在我的自定义组件中，我是这样调用 dataProvider 的：

class MyClass extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
        };
    }

    componentDidMount() {
        dataProvider('GET_GENERAL', 'myRessource', {
            "perPage": 1,
            "page": 1,
            "oneField.id": 123,
            "twoField.id": 132,
            "threeField.id": 145,
        })
            .then(response => response.data)
            .then((response) => {
                    this.setState({data: response});
            })
    };
 render() {
        const {data} = this.state;
        return <div>{data.field}</div>
 }
}

const enhance = compose(
    withStyles(styles),
    connect(mapStateToProps, {customAction}),
    translate
);

export default enhance(MyClass);

当然我的 authProvider 是这样配置的：

    // ...
    if (type === AUTH_ERROR) {
        const {status} = params;
        if (status === 401 || status === 403) {
            console.log('here');
            return Promise.reject();
        }
        console.log('there');
        return Promise.resolve();
    }
    // ...

在我的示例中，我的 API returns HTTP 401，并且在控制台中我从未获得 'here' 或 'there'，因此我无法执行自定义对 AUTH_ERROR.

采取行动

知道我做错了什么吗？

Answer 1

我弄清楚如何处理 FETCH_ERROR。医生说：React-admin components don’t call the dataProvider function directly. 他们使用 withDataProvider。下面是我的示例的解决方案：

class MyClass extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
        };
    }

    componentDidMount() {
        const { dataProvider } = this.props;
        dataProvider('GET_GENERAL', 'myRessource', {
            "perPage": 1,
            "page": 1,
            "oneField.id": 123,
            "twoField.id": 132,
            "threeField.id": 145,
        })
            .then(response => response.data)
            .then((response) => {
                    this.setState({data: response});
            })
    };
 render() {
        const {data} = this.state;
        return <div>{data.field}</div>
 }
}

const enhance = compose(
    withStyles(styles),
    withDataProvider,
    connect(mapStateToProps, {customAction}),
    translate
);

export default enhance(MyClass);

AUTH_ERROR 未在自定义数据提供程序上调用

AUTH_ERROR not called on custom dataProvider

react-admin