我刚刚完成了react-admin的教程。一切正常，直到我决定连接自己的后端。该列表显示正确，但是当我单击任何标题时，它根本不会排序。 Picture of what the site looks like
除了使用自定义dataprovider之外，我没有进行任何其他更改，但是我将自定义dataprovider与本教程中提供的jsonplaceholder API一起使用，并且工作正常。所以我的自定义dataprovider应该不是问题
此外，根据开发工具日志logs
，请求看起来还不错有人知道发生了什么事吗？
App.js
import React from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { createMuiTheme } from "@material-ui/core/styles";
import { ItemList } from "./items";
import simpleRestProvider from "ra-data-simple-rest";
import dataprovider from "./dataprovider";
import dataprovider1 from "./dataprovider1";
const dataProvider = dataprovider1("http://localhost:5000/api");
function getTheme(theme) {
return createMuiTheme({
palette: {
type: theme.paletteType,
background: {
default: theme.paletteType === "light" ? "#ddd" : "#fff"
},
secondary: {
light: "#5f5fc4",
main: "#283593",
dark: "#001064",
contrastText: "#fff"
}
}
});
}
const theme = getTheme({
paletteType: "light"
});
const App = () => (
<Admin dataProvider={dataProvider} theme={theme}>
<Resource name="items/getAllItems" list={ItemList} />
</Admin>
);
export default App;
自定义数据提供程序
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";
/**
* Maps react-admin queries to a json-server powered REST API
*
* @see https://github.com/typicode/json-server
* @example
* GET_LIST => GET http://my.api.url/posts?_sort=title&_order=ASC&_start=0&_end=24
* GET_ONE => GET http://my.api.url/posts/123
* GET_MANY => GET http://my.api.url/posts/123, GET http://my.api.url/posts/456, GET http://my.api.url/posts/789
* UPDATE => PUT http://my.api.url/posts/123
* CREATE => POST http://my.api.url/posts/123
* DELETE => DELETE http://my.api.url/posts/123
*/
export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
/**
* @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
* @param {String} resource Name of the resource to fetch, e.g. 'posts'
* @param {Object} params The data request params, depending on the type
* @returns {Object} { url, options } The HTTP request parameters
*/
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 = "PUT";
options.body = JSON.stringify(params.data);
break;
case CREATE:
url = `${apiUrl}/${resource}`;
options.method = "POST";
options.body = JSON.stringify(params.data);
break;
case DELETE:
url = `${apiUrl}/${resource}/${params.id}`;
options.method = "DELETE";
break;
case GET_MANY: {
const query = {
[`id_like`]: params.ids.join("|")
};
url = `${apiUrl}/${resource}?${stringify(query)}`;
break;
}
default:
throw new Error(`Unsupported fetch action type ${type}`);
}
return { url, options };
};
/**
* @param {Object} response HTTP response from fetch()
* @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
* @param {String} resource Name of the resource to fetch, e.g. 'posts'
* @param {Object} params The data request params, depending on the type
* @returns {Object} Data response
*/
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.map(resource => ({ ...resource, id: resource._id })),
total: parseInt(
headers
.get("x-total-count")
.split("/")
.pop(),
10
)
};
case CREATE:
return { data: { ...params.data, id: json._id } };
default:
return { data: json };
}
};
/**
* @param {string} type Request type, e.g GET_LIST
* @param {string} resource Resource name, e.g. "posts"
* @param {Object} payload Request parameters. Depends on the request type
* @returns {Promise} the Promise for a data response
*/
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: "PATCH",
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)
);
};
};
答案 0 :(得分：0)
您的后端需要解析发送的参数。在发送的参数中，有“ sort”和“ DESC”或“ ASC”字段。您可以使用它们对结果进行排序。
示例：
这是我在Rails后端所做的事情：
@users = User.all.order（ “＃{params ['sort'] [/ [”（。）“，（。）] /，1]}＃{params ['sort'] [/ [（。 ），“（（。）”] /，2]}“）