React使用state存储的用户ID发起Axios请求参数为空问题求助

问题根因 #

• React 状态更新为异步操作，且你发起fetch获取用户ID属于异步网络请求。你初始化currentuser状态时值为空，Axios请求在fetch还未返回结果、currentuser还未被赋值为正确ID时就已经执行，因此拿到的是初始空值。
• 渲染时可以正常展示值，是因为setCurrentuser触发组件重新渲染，此时状态已经更新完成。

解决方案 #

方案1：监听currentuser状态，有值后再发起Axios请求 #

将Axios请求包裹在依赖currentuser的useEffect中，并且加非空判断，避免空值请求：

useEffect(() => {
  // 只有currentuser有有效值时才发起请求
  if (!currentuser) return
  Axios.request({
    method: 'POST',  
    url: 'http://localhost:3001/api/post',
    data: {
      curus: currentuser
    },
  })
  .then(response => response.data)
  .then(data => {
    // 你的业务逻辑
  })
}, [currentuser])

如果你的Axios请求是由点击等用户操作触发的，在触发逻辑中加非空判断即可：

const fetchMessage = () => {
  if (!currentuser) return
  // 执行Axios请求逻辑
}

方案2：优化服务端SQL查询逻辑，避免SQL注入风险 #

你当前的SQL语句使用字符串拼接，存在严重的SQL注入漏洞，建议改为参数化查询：

app.post('/api/post', (req, res) => {
  const currentt = req.body.curus
  // 使用参数化查询替代字符串拼接
  const sqlSelect = "SELECT * FROM messagestable WHERE sender = ? OR recipient = ?"
  db.query(sqlSelect, [currentt, currentt], (err, result) => {
    if (err) {
      return res.status(500).send('查询失败')
    }
    res.send(result)
    console.log(currentt)
  })
})

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