req.body 未定义 - React 和 Nodejs答案

【问题标题】：req.body is undefined - React & Nodejsreq.body 未定义 - React 和 Nodejs
【发布时间】：2021-01-20 03:26:54
【问题描述】：

这是我第一次使用 react 和 node js。所以为了反应，我有这个表格：

<form onSubmit={register}>
   <label>First Name: </label>
   <input required type="text" id="firstName" name="firstName" onChange={formValues}>

这是我为 onChange 函数编写的更新我的钩子的内容

const formValues = (event) => {
        setUserDetails({
            ...userDetails,
            [event.target.name]: event.target.value
        });
    }

这就是我写钩子的方式

    const [userDetails, setUserDetails] = useState({
        firstName: ''
    });

对于onSubmit，我是这样写的

const register = async (event) => {
        event.preventDefault();
        const body = JSON.stringify({
            firstName: userDetails.firstName
        });
        const response = await axios.post("/auth/register", body, {
            header: {
                'Content-Type': 'application/json'
            }
        });
    }

最后，当我尝试 console.log

console.log("the request body: ", req.body);
console.log("the first name", req.body.firstName);

结果如下：

the request body:  [Object: null prototype] {'{"firstName":"dawd"}': ''}

the first name undefined

这让我感到困惑，因为我有“req.body”的值，但是当我尝试获取名字的值时，我得到一个未定义的值。

在我的服务器 app.js 中，我有 body-parser，但它似乎仍然无法解决问题

const bodyParser = require('body-parser');
const express = require("express"); // Start server from nodejs

const app = express();

// Using body-parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

任何帮助将不胜感激。

【问题讨论】：

axios post不需要stringify，所以你的body可以是{ firstName: userDetails.firstName }
谢谢Thanh，这实际上修复了错误。非常感谢
我将其添加为答案

标签： node.js reactjs

【解决方案1】：

与fetch 不同，axios 将对象作为主体，正如@Thanh 所指出的那样。因此，当您使用JSON.stringify 将正文转换为字符串时，axios 通过获取字符串并将其用作对象的键将其转换回对象，因此{'{"firstName":"dawd"}': ''}。您应该将对象直接传递到 axios 以便在服务器端正确接收它。所以你的register 函数应该是这样的：

   const register = async (event) => {
        event.preventDefault();
        const body = {firstName: userDetails.firstName};
        const response = await axios.post("/auth/register", body, {
            header: {
                'Content-Type': 'application/json'
            }
        });
    }

【讨论】：

谢谢codemonkey，你的解释太棒了。
@ThinhPham 没问题。不要忘记通过选中旁边的绿色复选框来接受解决了您的问题的答案。

【解决方案2】：

在将数据传递给 axios 时，您不需要使用 JSON.stringify。您可以直接将数据作为对象传递。

const body = {
        firstName: userDetails.firstName
    };

【讨论】：

感谢 Zealous Web，解决了问题。

【解决方案3】：

axios post不需要stringify，所以你的body可以是{ firstName: userDetails.firstName }

【讨论】：