[英]MERN application - NODE.JS req.body empty return
我將 React redux 工具包與 node.js 一起使用。我花了幾個小時試圖弄清楚為什么 req.body 是空的(具有更新功能)。 express.json() 中間件在 server.js 中有很好的定義。
后端 - servers.js :
const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv').config();
const { errorHandler } = require('./middleware/errorMiddleware');
const connectDB = require('./config/db');
const port = process.env.PORT || 5000;
connectDB();
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use('/api/books', require('./routes/bookRoutes'));
app.use(errorHandler);
app.listen(port, () => console.log(`Server started on port ${port}`));
后端 - bookRoutes.js :
...
router.put('/:id', updateBook);
后端 - bookController.js :
const asyncHandler = require('express-async-handler');
const updateBook = asyncHandler(async (req, res) => {
const book = await Book.findById(req.params.id);
if (!book) {
res.status(400);
throw new Error('Book not found');
}
console.log('backend bookController req body: ', req.body);
`//output : backend bookController req body: {}`
const updatedBook = await Book.findByIdAndUpdate(req.params.id, req.body, {
new: true,
});
res.status(200).json(updatedBook);
});
前端 - bookSlice.js :
const initialState = {
books: [],
isLoading: false,
isSuccess: false,
isError: false,
message: '',
};
//Update book
export const updateBook = createAsyncThunk(
'books/update',
async ({ id, bookData }, thunkAPI) => {
try {
console.log('slice bookData : ', bookData);
`//output: slice bookData : undefined`
return await bookService.updateBook(id, bookData);
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
前端 - bookService.js :
const API_URL = 'http://localhost:5000/api/books/';
// Update user book
const updateBook = async (bookId, bookData) => {
console.log('axios service bookData: ', bookData);
`//output: slice service: undefined`
const response = await axios.put(API_URL + bookId, bookData);
return response.data;
};
前端 UpdateBook.jsx
const UpdateBook = () => {
const { id } = useParams();
const books = useSelector((state) => state.books.books);
const book = books.find((b) => b._id === id);
const dispatch = useDispatch();
const [title, setTitle] = useState(book.title);
const [description, setDescription] = useState(book.description);
const [author, setAuthor] = useState(book.author);
const handleSubmitButton = (id) => {
const bookUpdated = {
title: title,
description: description,
author: author,
};
dispatch(updateBook({ id, bookUpdated }));
};
return (
<div className="form">
<div className="title">Update</div>
<div className="subtitle">Let's update a book!</div>
<div className="input-container ic1">
<input
id="title"
className="input"
type="text"
placeholder=" "
value={title}
onChange={(e) => {
setTitle(e.target.value);
}}
/>
<div className="cut" />
<label htmlFor="title" className="placeholder">
Title
</label>
</div>
<div className="input-container ic2">
<input
id="description"
className="input"
type="text"
placeholder=" "
value={description}
onChange={(e) => {
setDescription(e.target.value);
}}
/>
<div className="cut" />
<label htmlFor="description" className="placeholder">
description
</label>
</div>
<div className="input-container ic2">
<input
id="text"
className="input"
type="text"
placeholder=" "
value={author}
onChange={(e) => {
setAuthor(e.target.value);
}}
/>
<div className="cut cut-short" />
<label htmlFor="text" className="placeholder">
Author
</label>
</div>
<button
onClick={() => handleSubmitButton(book._id)}
type="text"
className="submit"
>
Update book!
</button>
</div>
);
};
export default UpdateBook;
請注意,對於 postman,更新 function 有效。 解決我的問題的想法? 謝謝。
編輯:你能看看我的代碼嗎: CodeSandbox 。
在瀏覽器面板 [Browser(:3000)]: k971xu-3000.sse.codesandbox.io/ 的 3000 端口啟動。 在終端和控制台上查看:更新請求正文后為空。 請注意,create function 有效...解決我的問題的想法? 謝謝。
我認為,在后端 - bookController.js 中,你已經做了一些事情。 請參閱express-async-handler 。 而且您還沒有導出 controller。因此,在后端 - bookController.js: 中,導出您的 controller。
exports.updateBook = updateBook;
在后端 - bookRoutes.js:
const bookController = require(<"path of your controller file">);
router.put('/:id',asyncHandler(bookController.updateBook));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.