React Admin筛选器如何添加q参数实现非精确匹配？

你的API依赖q参数实现非精确匹配，当前筛选请求未携带该参数，可通过以下两种方式恢复或实现预期功能：

1. 恢复全局搜索框（生成q参数） #

原来的q参数大概率来自React Admin默认的全局搜索功能。若你自定义了filters但未包含全局搜索组件，只需在筛选器列表中添加SearchInput即可：

import * as React from "react";
import { List, TextField, Datagrid, TextInput, SearchInput } from 'react-admin';
import { PostPaginationm } from "./MyPagination";

const postFilters = [
   <SearchInput source="q" alwaysOn placeholder="全局搜索"/>, // 新增全局搜索框，对应q参数
   <TextInput label='Field' source="_Field-Name_matches" alwaysOn />,
   <TextInput label='Index' source="_Index-Name" alwaysOn />,
   <TextInput label='File' source="_File-Name" alwaysOn />,
   <TextInput label='Db' source="_db-name" alwaysOn />,
];

export const IndexFieldSchemaList  = () => (
    <List filters={postFilters} pagination={<PostPaginationm/>}>
        <Datagrid>
            <TextField source="id" label="Id"/>
            <TextField source="_db-name" label="Db"/>
            <TextField source="_File-Name" label="File"/>
            <TextField source="_Index-Seq" label="Seq"/>
            <TextField source="_Index-Name" label="Index"/>
            <TextField source="_Field-Name" label="Field"/>
            <TextField source="_Ascending" label="Asc"/>
            <TextField source="_Abbreviate" label="Abbr"/>
        </Datagrid>
    </List>
);

此时用户在全局搜索框输入内容时，请求的filter对象会自动带上q参数，符合你API的要求。

2. 自定义筛选逻辑，将指定字段映射为q参数 #

若你不需要全局搜索，而是希望将某个（或多个）筛选字段的值作为q参数发送，可通过filterToQuery函数自定义筛选参数转换规则：

import * as React from "react";
import { List, TextField, Datagrid, TextInput } from 'react-admin';
import { PostPaginationm } from "./MyPagination";

const postFilters = [
   <TextInput label='Field' source="_Field-Name_matches" alwaysOn />,
   <TextInput label='Index' source="_Index-Name" alwaysOn />,
   <TextInput label='File' source="_File-Name" alwaysOn />,
   <TextInput label='Db' source="_db-name" alwaysOn />,
];

export const IndexFieldSchemaList  = () => {
    // 自定义筛选参数转换逻辑
    const filterToQuery = (filters) => {
        // 示例：将File字段的值作为q参数，可根据需求调整
        const { "_File-Name": fileName, ...restFilters } = filters;
        const transformedFilters = { ...restFilters };
        
        if (fileName) {
            transformedFilters.q = fileName;
        }

        // 若需要合并多个字段到q，可改为：
        // const q = [filters["_File-Name"], filters["_Index-Name"]].filter(Boolean).join(" ");
        // if (q) transformedFilters.q = q;

        return transformedFilters;
    };

    return (
        <List 
            filters={postFilters} 
            pagination={<PostPaginationm/>}
            filterToQuery={filterToQuery} // 应用自定义转换逻辑
        >
            <Datagrid>
                <TextField source="id" label="Id"/>
                <TextField source="_db-name" label="Db"/>
                <TextField source="_File-Name" label="File"/>
                <TextField source="_Index-Seq" label="Seq"/>
                <TextField source="_Index-Name" label="Index"/>
                <TextField source="_Field-Name" label="Field"/>
                <TextField source="_Ascending" label="Asc"/>
                <TextField source="_Abbreviate" label="Abbr"/>
            </Datagrid>
        </List>
    );
};

这个方法可以灵活控制哪些筛选字段的值被映射到q参数，适配你的API非精确匹配需求。

验证效果 #

完成上述修改后，填写对应筛选框发起请求，即可看到filter对象中包含q参数，例如：

GET http://localhost:12537/React/web/table/indexfieldschema?filter={"q":"extent","_File-Name":"extent"}&range=[0,49]&sort=["id","ASC"]

内容的提问来源于stack exchange，提问作者Tim Kuehn