React前端如何向Node.js+MySQL后端传ID取数？无报错无返回是什么问题？

核心问题说明 #

1. 后端参数获取逻辑错误
   你定义的接口路由是/fetchdata/:id，属于路由路径参数，这类参数需要从req.params对象获取，而不是req.body。另外GET请求本身不携带请求体，就算你从req.body取值也不可能拿到数据，这就是id为undefined的直接原因。
2. 前端Axios GET请求参数使用错误
   Axios的get方法第二个参数是配置项，你直接写的四个字段不会被当做请求参数发送，如果你确实需要传递这些字段，需要放在配置项的params属性下。不过你当前场景下id已经拼接在请求URL里了，不需要额外传这几个参数。
3. 存在SQL注入风险
   你直接把用户传入的id拼接进SQL语句，恶意用户可以构造特殊id执行任意SQL操作，必须改成参数化查询。

修复后的代码 #

服务端index.js

app.get(`/fetchdata/:id`,(req, res) => {
  // 从路由参数取id
  const id = req.params.id;
  console.log(id);
  // 改成参数化查询避免注入
  db.query(`SELECT CourseID, TeacherSSN, Name, Description FROM course WHERE CourseID=?`, [id], (err, result) => {
    if (err) {
      console.log(err)
      res.status(500).send('查询失败')
    } else {
      res.send(result)
    }
  })
});

前端React代码（简化无用逻辑）

function EditCourse() {
    const [data, setData] = useState([]);
    const { id } = useParams();

    useEffect(() => {
        // 如果id不存在就不发请求
        if(!id) return
        Axios.get(`http://localhost:3003/fetchdata/${id}`)
        .then(result => setData(result.data))
        // 加错误捕获，方便排查问题
        .catch(err => console.log('请求出错：', err))
    }, [id]);
    return(
       <div>
          {/* 加data长度判断，避免空数组渲染无内容 */}
          {data.length > 0 ? data.map(item => {
              return (
                <div key={item.Id}>
                    <h2>رقم الدورة :</h2>
                    <br />
                    <input type="text" value={item.CourseID}/>
                    <h2>اسم الدورة :</h2>
                    <br />
                    <input type="text" value={item.Name}/>
                    <br />
                    <h2>رقم هوية مدرب الدورة :</h2>
                    <br />
                    <input type="text" value={item.TeacherSSN}/>
                    <br />
                    <p> تفاصيل الدورة :</p>
                    <br />
                    <TextField
                        label={item.Description}
                        color="secondary"
                        variant="outlined"
                        multiline/>
                </div>
              ) 
          }) : <p>暂无数据</p>}
       </div>
    ) 
}

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