如何将React传递的请求参数动态传入MySQL查询语句？

你当前的代码存在三处参数链路断裂的问题，按以下步骤修改即可实现动态传参，同时避免SQL注入风险：

• 修复前端请求写法：你当前axios请求用单引号包裹路径，模板字符串的${}插值语法必须用反引号（）包裹才能生效，同时需要把jobCategory`加到useEffect依赖数组，选中值变化时才会重新发起请求，修正后代码：

useEffect(() => {
  (async() => {
    // 外层替换为反引号
    const result = await axios.get(`/submissions/${jobCategory}`)
    setSubmissions(result.data.submissions)
  })()
// 新增jobCategory依赖
}, [jobCategory])

• 修复后端接口参数透传：Express路由的路径参数存储在req.params对象中，你当前接口没有取出参数，也没有把参数传给数据库查询方法，修正后代码：

app.get('/submissions/:jobCategory', (req, res) => {
  // 取出路径传入的职位类别参数
  const jobCategory = req.params.jobCategory;
  // 将参数传入查询方法
  sql_database.getSubmissionsCategory(jobCategory, (error, submissions) => {
    if (error) {
      res.status(500).send({error: error.message});
      return
    }
    res.send({submissions});
  })
});

• 修复数据库查询逻辑：给查询函数新增入参接收职位类别值，禁止直接拼接用户传入的内容生成SQL，必须使用mysql驱动内置的参数化查询能力，用?作为值占位符，驱动会自动做转义处理，彻底避免SQL注入风险，修正后代码：

// 新增jobCategory形参
function getSubmissionsCategory(jobCategory, callback) {
    // 用?代替硬编码的固定值
    const query = `
    SELECT * FROM submissions
    WHERE jobCategory = ?
    `
    // 第二个参数传入按占位符顺序排列的参数值数组
    connection.query(query, [jobCategory], (error, results) => {
        if (error) {
            callback(error)
            return
        }
        callback(null, results)
    })
}
exports.getSubmissionsCategory = getSubmissionsCategory;

安全提示：如果直接通过字符串拼接生成SQL语句，比如WHERE jobCategory="${jobCategory}"，恶意用户可以构造特殊输入篡改SQL逻辑，造成数据泄露、删除等严重安全问题，所有动态传入的SQL值都必须通过参数化占位符传递。

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