如何解决React Admin列表筛选仅支持精确匹配无法实现模糊查询的问题

问题原因 #

React Admin 自带的筛选组件默认仅会将输入的筛选参数原样传递给后端接口，本身不会做模糊匹配逻辑，你遇到的精确匹配限制本质是后端接口当前按照字段完全相等的规则返回查询结果。

解决方法 #

方法1：后端适配（推荐，适合数据量较大的生产场景）

直接修改后端对应接口的查询逻辑：

• 如果是 SQL 类数据库：将 audience_name = 传入参数 的查询条件改为 audience_name like %传入参数%
• 如果是 MongoDB 类非关系数据库：将匹配规则改为 { audience_name: { $regex: 传入参数, $options: 'i' } }（加i可忽略大小写匹配）

如果后端不想改通用查询规则，也可以在前端给筛选输入框加parse属性，将输入的关键词包装成后端可识别的模糊匹配格式，示例如下：

const postFilters = [
    <TextInput 
        source="audience_name" 
        label="Search Audience Label" 
        parse={value => value ? `%${value}%` : undefined}
    />,
];

后端只要识别到参数带%时走模糊匹配逻辑即可。

方法2：前端本地筛选（仅适合数据量小的测试/内部场景）

自定义 dataProvider 的getList方法，全量拉取数据后在前端做模糊过滤，示例代码：

import jsonServerProvider from 'ra-data-json-server';

const baseDataProvider = jsonServerProvider('你的接口根地址');

const customDataProvider = {
    ...baseDataProvider,
    getList: (resource, params) => {
        // 只对受众标签列表的audience_name字段做模糊匹配
        if (resource === 'audience_label' && params.filter.audience_name) {
            const keyword = params.filter.audience_name.trim().toLowerCase();
            // 清空原有filter参数，先拉取全量数据
            return baseDataProvider.getList(resource, { ...params, filter: {} })
                .then(res => {
                    // 本地过滤包含关键词的项
                    const filteredData = res.data.filter(item => 
                        item.audience_name.toLowerCase().includes(keyword)
                    );
                    return {
                        ...res,
                        data: filteredData,
                        total: filteredData.length
                    };
                });
        }
        // 其他资源和筛选规则走默认逻辑
        return baseDataProvider.getList(resource, params);
    }
};

之后将customDataProvider传给<Admin>组件的dataProvider属性即可生效。

内容的提问来源于stack exchange，提问作者The Coder