如何使用Axios从React发送数据，并在Express中使用请求正文(request body)？

Question

我在React中使用状态来保存一些表单数据，当我提交表单时，我想使用axios发送POST请求，并且想在express中使用表单数据。我试过使用req.body.params、req.body.data、req.body general来访问请求体(payload)，但它们都返回未定义(undefined)。基本上，我想在express中访问general(表单数据)。我怎么做呢？

注：这些状态的名称为“general”和“oneSuggestion”，它们是基本字符串状态。

注：我已经搜索了数小时相似的问题，但没有解决我的问题。如果有解决方案，而我找不到，请原谅我。

编辑：注释掉了data，直接将states放在了post请求中。

React 代码：

      function handleSubmit(e) {
        e.preventDefault();
        console.log(general, suggestionsForCases);
        /*
                        let data = {
                        general: general,
                        oneSuggestion: oneSuggestion,
                        };
                        data = JSON.stringify(data);
                        console.log(data);
                        */

        let axiosConfig = {
        headers: {
            "Content-Type": "application/json;",
            "Access-Control-Allow-Origin": "*",
        },
        };
        axios
        .post(
            "http://localhost:8000/dict/",
            { general: general, oneSuggestion: oneSuggestion },
            axiosConfig
        )
        .then((res) => console.log("success, dictionary sent,", res))
        .catch((err) => {
            console.log(err.response);
        });
    }
    function handleInput(e) {
        if (e.target.name == "general") {
        setGeneral(e.target.value);
        console.log(general);
        }
        if (e.target.name == "oneSuggestion") {
        setOneSuggestion(e.target.value);
        console.log(oneSuggestion);
        }
    }

    return (
        <div>
        <form onSubmit={handleSubmit}>
            <label>
            general:
            <textarea name="general" onChange={handleInput}></textarea>
            </label>

            <label>
            suggestion:
            <input name="oneSuggestion" onChange={handleInput}></input>
            </label>
            <button type="submit">submit</button>
        </form>
        </div>
    );
    }
    export default AddDictionary;



        

Express 代码：

    const express = require("express");
    const router = express.Router();

    const Dictionary = require("../database/category/dictionary");

    router.use(express.json());

    router.get("/", (req, res) => {
    console.log("success");
    res.json({ msg: "success"});
    });
    router.post("/", (req, res) => {
    console.log(req.body.general);
    res.json({
        msg: "success",
    });
    });

    module.exports = router;

- dumblessar

---

看起来你发送的是 {params:{general:""}} 而不是 {general:""}。 - tklg

我认为在发送数据之前将其转换为字符串是不必要的，因为axios会自动处理。 - tklg

嘿，我尝试了这个，但仍然返回未定义：axios.post（“http://localhost:8000/dict/”，{general：general，oneSuggestion：oneSuggestion}，axiosConfig）。 - dumblessar

Answer 1

好的，我找到了问题所在。根据这个来源，我从post中删除了axiosConfig，现在这是可用的代码：

         axios
        .post(
            "http://localhost:8000/dict/",
            { general: general, oneSuggestion: oneSuggestion }
        )
        .then((res) => console.log("success, dictionary sent,", res))
        .catch((err) => {
            console.log(err.response);
        });

谢谢你们的帮助。

- dumblessar

Answer 2

您需要中间件才能解析请求并使其在req.body中可访问。我假设您正在使用 4.16 之后的版本，该版本引入了express.json（）作为此场景的中间件。如果您使用早期版本，我会更新我的答案。

以下是使用您的代码作为起点的示例：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/', (req, resp) => {
  console.log(request.body.params);
});

app.listen(3000);

为了解释，任何你发布的内容，比如说你发布了以下对象：

{
  fruit: 'apple',
  vegetable: 'onion'
}

在使用解析器后，您可以通过 req.body.fruit 和 req.body.vegetable 访问发布的数据。

- Aaron

---

嘿，我已经按照你说的做了，并编辑了上面的Express代码，但是当我使用req.body.general时，仍然返回未定义。 - dumblessar