#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 }