React如何将变量传递给GET请求

Question

我正在尝试查询一个表格，其中teacherId等于登录人的teacherId，但我无法将这个teacherId从前端传到后端。

这是后端。

app.get("/api/get", async(req,res) => {
    const teacherId = req.body.teacherId
    connection.query(
        "SELECT class FROM homework WHERE teacherID = ?",
        [teacherId],
        (err, result) => {
            if (result){
                res.send({ message: result })
            } else{
                console.log(err)
            }
        }
    )
})

这是前端

 useEffect(() => {
        Axios.get("http://localhost:1337/api/get", {
            teacherId: teacherId
        }).then((response) => {
            if(response){
                setDisplayHomework(response.data.message)
            } else{
                console.log("error")
            }
        })
    })

const teacherId = localStorage.getItem("teacherId")

我认为问题出现在teacherId: teacherId这段代码上，但我不知道原因。

- Saif Khadraoui

---

你想在URL中发送一个param吗？ - Alessandro

@Alessandro 不，我想要将前端的变量teacherId传递到后端。 - Saif Khadraoui

Answer 1

您需要使用

Axios.get("http://localhost:1337/api/get", {
     params: { teacherId }
 });

使用req.query.teacherId读取它。

---

如果您查看Axios.get的签名，它是：

axios.get(url[, config])

相比之下，

axios.post(url[, data[, config]])

将数据作为第二个参数传递。

这是因为GET请求中的Body未被服务器使用。有关此内容，请阅读HTTP GET with request body。

- Gabriele Petrioli

Answer 2

通常情况下，您不会在GET请求中发送正文。将教师ID放入URL中。然后这被称为路径变量。

app.use('/teacher/:teacherId', function(req, res, next) {
  console.log(req.params.teacherId);
  next();
})

- Matthias Wiedemann

Answer 3

与 post 请求不同，获取请求没有请求体。因此，Axios.get 函数不应该有第二个参数用于请求体。相反，你需要将参数作为 URL 传递，例如：

useEffect(() => {
        Axios.get("http://localhost:1337/api/get?teacherId="+teacherId).then((response) => {
            if(response){
                setDisplayHomework(response.data.message)
            } else{
                console.log("error")
            }
        })
    })

然后在您的后端代码中使用req.params访问获取请求的URL参数：

app.get("/api/get", async(req,res) => {
    const teacherId = req.params.teacherId
    connection.query(
        "SELECT class FROM homework WHERE teacherID = ?",
        [teacherId],
        (err, result) => {
            if (result){
                res.send({ message: result })
            } else{
                console.log(err)
            }
        }
    )
})

- scroobius