react-redux-typescript项目GET接口传递可选查询参数实现问询

1. 调整事件触发逻辑，传递输入值 #

修改HandleKeyPress函数，将当前输入框的状态值传入loadList的请求参数中：

const HandleKeyPress = (event:React.KeyboardEvent<HTMLInputElement>) => {
  if(event.key === 'Enter') {
    dispatch(loadList({
      type: viewType.search,
      id1: text.id1,
      id2: text.id2,
      id3: text.id3
    }))
  }
}

2. 扩展TS请求类型定义 #

更新LoadListRequest接口，新增三个id字段的类型声明：

interface LoadListRequest {
  type: viewType,
  id1?: string,
  id2?: string,
  id3?: string
}

3. 改造请求函数实现参数拼接 #

无需手动拼接查询字符串，使用axios内置的params配置即可自动生成符合要求的URL参数，提前过滤掉空值的参数即可：

const getTask = (request: LoadListRequest) => {
  // 过滤出有值的id参数
  const validParams = Object.fromEntries(
    Object.entries(request).filter(([key, value]) => 
      ['id1', 'id2', 'id3'].includes(key) && value?.trim()
    )
  )
  return axios.get("/api/search/", {
    params: validParams
  })
}

如果需要手动拼接参数，可以使用URLSearchParams实现，效果一致：

const getTask = (request: LoadListRequest) => {
  const params = new URLSearchParams()
  ;['id1', 'id2', 'id3'].forEach(key => {
    const value = request[key as keyof LoadListRequest]
    if (value?.trim()) params.append(key, value.trim())
  })
  return axios.get(`/api/search/?${params.toString()}`)
}

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