单击react-admin中的列表标题后排序不起作用

Question

I followed the tutorial for react-admin. All was working fine until I connected to my own backend. The list appears properly but it was not sorting at all when I click any of the headers.

I used my custom data provider with the jsonplaceholder API given in the tutorial and it works fine. But the only issue is sort is not working.

How can I solve this issue?

If anyone knows the answer, please provide the solution in reactjs or react-admin only.

Image of how site looks like

import API from "./config";
import {
    GET_LIST,
    GET_ONE,
    GET_MANY,
    GET_MANY_REFERENCE,
    CREATE,
    UPDATE,
    DELETE,
    DELETE_MANY,
    fetchUtils,
} from 'react-admin';

import { stringify } from 'query-string';

const API_URL = `${API.domain}${API.admin_path}`;

/**
 * @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 Provider request params, depending on the 
 type
 * @returns {Object} { url, options } The HTTP request parameters
 */



const convertDataProviderRequestToHTTP = (type, resource, params) => {
    let options = {
        headers: new Headers({ Accept: 'application/json' })
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Bearer ${token}`);
    switch (type) {
        case GET_LIST: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: JSON.stringify([field, order]),
                range: JSON.stringify([(page - 1) * perPage, page * perPage 
                - 1]),
                filter: JSON.stringify(params.filter),
            };
            return { url: `${API_URL}/${resource}?${stringify(query)}`, 
            options };
        }
        case GET_ONE:
            return { url: `${API_URL}/${resource}/${params.id}`, options };
        case GET_MANY: {
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            return { url: `${API_URL}/${resource}?${stringify(query)}` };
        }
        case GET_MANY_REFERENCE: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: JSON.stringify([field, order]),
                range: JSON.stringify([(page - 1) * perPage, (page * 
                perPage) - 1]),
                filter: JSON.stringify({ ...params.filter, [params.target]: 
                params.id }),
            };
            return { url: `${API_URL}/${resource}?${stringify(query)}` };
        }
        case UPDATE:
            return {
                url: `${API_URL}/${resource}/${params.id}`,
                options: { ...options, method: 'PUT', body: 
                JSON.stringify(params.data) },
            };
        case CREATE:
            return {
                url: `${API_URL}/${resource}`,
                options: { ...options, method: 'POST', body: 
                JSON.stringify(params.data) },
            };
        case DELETE:
            return {
                url: `${API_URL}/${resource}/${params.id}`,
                options: { method: 'DELETE' },
            };
        case DELETE_MANY:
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            return {
                url: `${API_URL}/${resource}?${stringify(query)}`,
                options: { method: 'DELETE' },
            };
        default:
            throw new Error(`Unsupported fetch action type ${type}`);
    }
};

/**
 * @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 Provider request params, depending on the 
   type
 * @returns {Object} Data Provider response
 */

const convertHTTPResponseToDataProvider = (response, type, resource, params) 
 => {
    const { headers, json } = response;
    switch (type) {
       case GET_LIST:
            return {
                data: json.data.map(x => x),
                total: 10, //parseInt(headers.get('content- 
                range').split('/').pop(), 10),
            };
        case CREATE:
            return { data: { ...params.data, id: json.id } };
        default:
            return { data: json.data };
    }
};

/**
 * @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 Provider request params, depending on the 
 type
 * @returns {Object} Data Provider response
 */

const convertHTTPResponseToDataProvider = (response, type, resource, params) 
=> {
    const { headers, json } = response;
    switch (type) {
        case GET_LIST:
            return {
                data: json.data.map(x => x),
                total: 10, //parseInt(headers.get('content- 
                range').split('/').pop(), 10),
            };
        case CREATE:
            return { data: { ...params.data, id: json.id } };
        default:
            return { data: json.data };
    }
};

/**
 * @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 response
 */
export default (type, resource, params) => {
    const { fetchJson } = fetchUtils;
    const { url, options } = convertDataProviderRequestToHTTP(type, 
    resource, params);
    return fetchJson(url, options)
        .then(response => convertHTTPResponseToDataProvider(response, type, 
         resource, params));
};

Answer 1

在React-Admin中排序使用另一个排序选项向数据库发出新请求，检查您的自定义dataProvider是否返回正确排序的数据，并且您的后端是否理解该请求的搜索字符串。