React Native queryString格式化异常问题排查求助

你遇到的问题是API请求参数格式不符合预期：实际得到的参数对象包含"DE": null，但你需要的是"query": "DE"。让我们先分析你的代码哪里出了问题，再给出修复方案。

问题根源 #

问题出在这一行代码：

requestParams = {...requestParams, ...queryString.parse(query)}

当你传入的query是字符串"DE"时，queryString.parse()会把它当作一个没有值的查询参数来解析——因为标准的查询字符串格式是key=value的形式，而你传入的是纯值DE，所以解析后会生成{ "DE": null }，这就导致最终的requestParams里出现了DE: null，而不是你想要的query: "DE"。

修复方案 #

你不需要用queryString.parse来处理这个query参数，因为它本身就是你要赋值给query字段的纯值。直接把它添加到requestParams里即可：

修改后的代码如下：

export function thunkFetchOrders(
 query = 'DE', offset = 0, limit = 10, filters = {}
) {
 return async (dispatch: any) => {
 if (offset === 0) {
 dispatch( resetOrders() )
 }
 let requestParams = {
 offset, limit,
 }
 requestParams = {...requestParams, ...setFilter(filters)}
 if (query) {
 // 直接将query赋值给requestParams的query字段，不需要parse
 requestParams = {...requestParams, query}
 }
 try {
 const res = await axios.get(`/orders`, {params: requestParams})
 await dispatch( fetchOrders( res.data, limit, offset, filters ) )
 } catch (error) {
 await dispatch(thunkFetchError(error));
 }
 }
}

这样修改后，当query为"DE"时，requestParams就会生成你预期的格式：{ "query": "DE", "limit": 10, "offset": 0, }，和你的目标参数结构完全一致。

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