我想添加自定义卡到我的网页之一，它应该调用带过滤器的REST API。
我写了一个新的组成部分，但我得到的错误返回，这种反应是没有定义。 我查了一下，没有电话都达到我的API，所以我敢肯定响应没有定义的，因为API调用没有发生，不执行。
这里是我的组件的代码：
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;
我想在我的名单像这样使用它：
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调用：
我App.js：
<Resource name="clicks" options={{ label: 'Legutóbbi kattintások' }} list={ClickList} />
我该怎么办错了，我datapovider不叫我的API？
我的数据提供器/ 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)
);
};
};
