RTK结合MySQL：如何将数组变量拆分为单独查询条目

问题根源 #

GET请求的查询参数没有原生数组类型，RTK Query默认会把数组参数序列化成逗号分隔的字符串（比如['ClassA','ClassB']会被转成class=ClassA,ClassB）。后端Express拿到req.query.class后，直接把这个字符串放进二维数组传给MySQL，相当于执行了WHERE ticker IN ('ClassA,ClassB')——这会把整个字符串当成单个匹配值，自然无法正确识别多个条目。

解决方案 #

方案1：前端调整参数序列化，传递多值参数 #

修改RTK Query的API定义，让数组参数生成多个同名查询参数（比如class=ClassA&class=ClassB），这样Express能直接拿到数组：

fetchBulkClasses: builder.query({
  query: (something) => {
    return {
      url: '/bulkclasses',
      // 手动拆分数组为多个同名参数
      params: something.map(item => ({ class: item })),
      method: 'GET'
    }
  }
})

或者用qs库（需先安装）配置序列化规则，自动生成多值参数：

import qs from 'qs';

fetchBulkClasses: builder.query({
  query: (something) => {
    return {
      url: '/bulkclasses',
      params: { class: something },
      paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),
      method: 'GET'
    }
  }
})

Express默认的查询解析器已经支持多值参数，此时req.query.class会自动是数组类型。

方案2：后端处理逗号分隔字符串，转成数组 #

如果不想修改前端，直接在后端把收到的字符串拆成数组：

app.get("/bulkclasses", (req, res) => {
  // 兼容单个值和逗号分隔字符串，统一转成数组
  const classList = Array.isArray(req.query.class) 
    ? req.query.class 
    : req.query.class.split(',');
  
  const q = 'select * from recent where ticker in (?)';
  // 直接传一维数组，MySQL驱动会自动转成IN ('a','b')格式
  db.query(q, [classList], (err, data) => {
    if(err) {return res.json(err)}
    return res.json(data)
  })
})

注意这里不需要嵌套二维数组，直接传一维数组给MySQL驱动即可，它会自动生成对应数量的占位符。

额外提醒 #

如果数组元素可能包含逗号（比如特殊命名的类），方案1更稳妥；普通场景下方案2更省事。

内容的提问来源于stack exchange，提问作者Peter Double U