React Admin中基于过滤器生成动态URL的实现疑问

你可以通过先构建过滤对象，再选择性添加有值的参数，最后转成JSON字符串的方式来实现，这样就不会把undefined的参数带进URL里了。具体改法如下：

rowClick={(id, resource, record) => {
  setSelectedRecord(record.product)
  const { q, size, color } = filterValues
  // 先创建必有的基础过滤对象
  const filterObj = {
    details: record.details,
    type: "product"
  }
  // 仅添加有值的参数
  if (q !== undefined) filterObj.q = q
  if (size !== undefined) filterObj.size = size
  if (color !== undefined) filterObj.color = color
  // 把对象转成合法的JSON字符串，再拼到URL上
  return `?filter=${JSON.stringify(filterObj)}`
}}

说明 #

• 用JSON.stringify替代手动拼接字符串，既能自动处理引号、特殊字符的转义问题，又能避免手动拼接容易出现的语法错误。
• 通过条件判断只保留有有效值的参数，自然就排除了undefined的情况，不用再纠结怎么删除URL里的无效片段。

如果需要同时排除空字符串、null这类无效值，可以把判断条件改成if (q !== undefined && q !== null && q !== '')，按需调整即可。

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