JavaScript如何生成符合devexpress react-grid要求的查询字符串过滤参数

解决方案 #

你需要的filters[索引].属性格式的查询参数可以通过原生URLSearchParams直接生成，不需要手动拼接字符串，修正后的代码如下：

const getQueryStringFilters = (): string => {
  const searchParams = new URLSearchParams();
  // 遍历所有过滤项，按索引拼接参数键
  filters.forEach((item, index) => {
    searchParams.append(`filters[${index}].columnName`, item.columnName);
    searchParams.append(`filters[${index}].value`, item.value);
    searchParams.append(`filters[${index}].operation`, item.operation);
  });
  // 自动生成编码后的查询字符串，无需手动处理转义
  return searchParams.toString();
};

原代码问题说明 #

• 硬编码了操作符为contains，没有读取过滤项本身的operation字段，无法适配endsWith等不同操作类型
• 拼接逻辑生成的是数组格式字符串，和需求的带索引的对象属性参数格式完全不匹配
• 手动处理编码容易出现多余字符、转义错误的问题，URLSearchParams会自动处理特殊字符的编码，兼容性更好

测试你的示例输入时，上面的代码返回的解码后参数完全符合你要求的格式：

filters[0].columnName: createdBy
filters[0].value: ew
filters[0].operation: contains
filters[1].columnName: title
filters[1].value: eweqw
filters[1].operation: endsWith

如果需要直接拿到未编码的参数对象用于其他请求库（比如axios的params配置），可以用下面的写法：

const getFiltersParams = () => {
  return filters.reduce((acc, item, index) => {
    acc[`filters[${index}].columnName`] = item.columnName;
    acc[`filters[${index}].value`] = item.value;
    acc[`filters[${index}].operation`] = item.operation;
    return acc;
  }, {} as Record<string, string>);
};

内容的提问来源于stack exchange，提问作者๖JoJo