Question

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

但是当我在自定义组件中使用dataProvider时，不会调用AUTH_ERROR。

如文档中所述，如果任何API调用返回任何错误，则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返回HTTP 401，并且在控制台中我从不获取“这里”或“那里”，因此我无法对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);

未在自定义dataProvider上调用AUTH_ERROR

1 个答案: