React-admin 组件不使用 dataprovider 调用 api [英] React-admin component does not use dataprovider to call api

问题描述

我想在我的一个页面上添加一个自定义卡片，它应该使用过滤器调用其余的 api.

I want to add a custom Card onto one of my pages, which should call the rest api with filters.

我为此编写了一个新组件，但我得到了错误返回，该响应未定义.我检查过，没有调用到达我的 api，所以我很确定响应没有定义，因为 api 调用没有发生，没有执行.

I wrote a new component for that, but i got error return, that response is not defined. I checked, no calls are reaching my api, so i'm pretty sure response is not defined because the api call is not happening, not executing.

这是我的组件代码:

import React, { Component } from 'react';
import { GET_LIST } from 'react-admin';
import dataProviderFactory from '../dataprovider/rest';

import StatsCard from './from_director/StatsCard';


class ClickStats extends Component {
    state = {};

componentDidMount() {
    dataProviderFactory(process.env.REACT_APP_DATA_PROVIDER).then(
        dataProvider => {
            dataProvider(GET_LIST, 'clicks', {
                filter: {
                    interval: 'day',
                    site_id: '1',
                    count: '1'
                },
            })
                .then(response => response.data)
                .then( dailyclick =>
                    this.setState({ dailyclick: response.data }),
                    console.log(response.data)
                )
        }
    );
}

render() {
    const {
        dailyclick,
    } = this.state;
    return (
                <StatsCard
                  statValue={dailyclick}
                  statLabel={'Napi Katt'}
                  icon={<i className="fa fa-check-square-o"></i>}
                  backColor={'red'}
                />
    );
}
}
export default ClickStats; 

我想像这样在我的列表中使用它:

I want to use it in my List like this:

import ClickStats from '../field/ClickStats';

export const ClickList = props => (
    <List {...props} bulkActions={false} filters={<ClickFilterList />} pagination={<ClickPagination />} perPage={20000}>
        <ClickStats />
        <Datagrid rowClick="edit">
            <ReferenceField label="Hirdeto" source="ad" reference="ads" linkType={false}><NumberField label="Hirdeto" source="users.name" /></ReferenceField>
            <ReferenceField label="Hirdetes" source="ad" reference="ads"><NumberField label="Hirdetes" source="title" /></ReferenceField>
            <IpConverter source="ip" />
            <TextField source="time" />
        </Datagrid>
    </List>
);

当然，我有我的 App.js 对点击"api 调用的追索权:

and of course I have my App.js recourse for 'clicks' api call:

我的 App.js:

<Resource name="clicks" options={{ label: 'Legutóbbi kattintások' }} list={ClickList} />

我的 datapovider 没有调用我的 api，我做错了什么?

What do I do wrong that my datapovider does not call my api?

我的数据提供者/rest.js

my dataprovider/rest.js

import { stringify } from 'query-string';
import {
  fetchUtils,
  GET_LIST,
  GET_ONE,
  GET_MANY,
  GET_MANY_REFERENCE,
  CREATE,
  UPDATE,
  UPDATE_MANY,
  DELETE,
  DELETE_MANY,
} from 'react-admin';

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
const convertDataRequestToHTTP = (type, resource, params) => {
    let url = '';
    const options = {};
    switch (type) {
        case GET_LIST: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                sort: field,
                order: order,
                start: (page - 1) * perPage,
                end: page * perPage,
            };
                url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_ONE:
            url = `${apiUrl}/${resource}/${params.id}`;
            break;
        case GET_MANY_REFERENCE: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                [params.target]: params.id,
                _sort: field,
                _order: order,
                _start: (page - 1) * perPage,
                _end: page * perPage,
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case UPDATE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'POST';
            options.body = JSON.stringify(params.data);
            break;
        case CREATE:
            url = `${apiUrl}/${resource}`;
            options.method = 'PUT';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        case GET_MANY: {
            url = `${apiUrl}/${resource}`;
            break;
        }
        default:
            throw new Error(`Unsupported fetch action type ${type}`);
    }
    return { url, options };
};

const convertHTTPResponse = (response, type, resource, params) => {
    const { headers, json } = response;
    switch (type) {
        case GET_LIST:
        case GET_MANY_REFERENCE:
            if (!headers.has('x-total-count')) {
                throw new Error(
                    'The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?'
                );
            }
            return {
                data: json,
                total: parseInt(
                    headers
                        .get('x-total-count')
                        .split('/')
                        .pop(),
                    10
                ),
            };
        case CREATE:
            return { data: { ...params.data, id: json.id } };
        default:
            return { data: json };
    }
};

return (type, resource, params) => {
    // json-server doesn't handle filters on UPDATE route, so we fallback to calling UPDATE n times instead
    if (type === UPDATE_MANY) {
        return Promise.all(
            params.ids.map(id =>
                httpClient(`${apiUrl}/${resource}/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify(params.data),
                })
            )
        ).then(responses => ({
            data: responses.map(response => response.json),
        }));
    }
    // json-server doesn't handle filters on DELETE route, so we fallback to calling DELETE n times instead
    if (type === DELETE_MANY) {
        return Promise.all(
            params.ids.map(id =>
                httpClient(`${apiUrl}/${resource}/${id}`, {
                    method: 'DELETE',
                })
            )
        ).then(responses => ({
            data: responses.map(response => response.json),
        }));
    }
    const { url, options } = convertDataRequestToHTTP(
        type,
        resource,
        params
    );
    return httpClient(url, options).then(response =>
        convertHTTPResponse(response, type, resource, params)
    );
};
};

推荐答案

我可以同时修复它.有多个小问题:

I could fix it in the meantime. There were multiple minor issues:

• 在列表视图中，我的 ClickStats 不起作用
  • DevTools 清楚地显示了这一点

  这篇关于React-admin 组件不使用 dataprovider 调用 api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！