Блог

Главная - Вопросы по программированию - req.body не определен — React

req.body не определен — React

#node.js #reactjs

#node.js #reactjs

Вопрос:

Я впервые использую react и node js. Итак, для react у меня есть такая форма:

 <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», но когда я попытался получить значение для первого имени, я получил undefined.

В моем 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 }));

Буду признателен за любую помощь.

Комментарии:

1. axios post не требует stringify, поэтому ваше тело может быть { firstName: userDetails.firstName }

2. Спасибо, спасибо, это действительно исправляет ошибку. Большое вам спасибо

3. Я добавил его в качестве ответа

Ответ №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'
            }
        });
    }

Комментарии:

1. Спасибо codemonkey, ваше объяснение превосходно.

2. @ThinhPham Нет проблем. Не забудьте принять ответ, который устранил вашу проблему, установив рядом с ним зеленый флажок.

Ответ №2:

При передаче данных в axios вам не нужно использовать JSON.stringify. Вы можете напрямую передавать данные как объект.

 const body = {
        firstName: userDetails.firstName
    };

Комментарии:

1. Спасибо, ретивый Веб, это исправляет.

Ответ №3:

axios post не требует stringify, поэтому ваше тело может быть { firstName: userDetails.firstName }

Метки: