我正在创建一个图书图书馆管理CRUD,我正在使用REACTION v18. 我正在努力地将数据添加到我的mongdb图谱中,因为每当我通过Redux传递formDataaxios.post时,我在后端控制器上总是得到空的req.body.

然而,当我通过表单数据向我的数据库添加数据时,当我使用postman 时,这不会发生.我的登录表单也使用axios.post运行良好,书单使用axios.get也运行良好,图书的CRUD是唯一不工作的.

这是我的bookCreate.js分:

const BookCreate = () => {
    const [title, setTitle] = useState('')
    const [responsibility, setResponsibility] = useState('')
    const [uniform_title, setUniform_title] = useState('')
    const [parallel_title, setParallel_title] = useState('')
    const [main_author, setMain_author] = useState('')
    const [other_author, setOther_author] = useState('')
    const [contributors, setContributors] = useState('')
    const [corp_author, setCorp_author] = useState('')
    const [placePub, setPlacePub] = useState('')
    const [publisher, setPublisher] = useState('')
    const [yearPub, setYearPub] = useState('')
    ...
    const submitHandler = (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.set('title', title);
        formData.set('responsibility', responsibility);
        formData.set('uniform_title', uniform_title);
        formData.set('parallel_title', parallel_title);
        formData.set('main_author', main_author);
        formData.set('other_author', other_author);
        formData.set('contributors', contributors);
        formData.set('corp_author', corp_author);
        formData.set('placePub', placePub);
        formData.set('publisher', publisher);
        formData.set('yearPub', yearPub);
       dispatch(newBooks(formData))
    }
    return (
    
     <Fragment>
            <MetaData title={'TUP-T Online Library - Admin'} />
            {/*<div className="row">*/}
                    <SideNavbarAdmin/>
                    <div></div>
                <div className="dashboard-content">
                    <div className="dashboard-page">
                        <div className="dashboard-header">
                            <h1>Add Book</h1>
                        </div> 
                        <div className="dashboard-body">
                            <form className="" onSubmit={submitHandler} encType='multipart/form-data'>
                                <div className="row g-3">
                                    <div className="col md-6">
                                        <div className="form-group">
                                            <label htmlFor="title_field">Title</label>
                                            <input
                                                type="text"
                                                id="title_field"
                                                className="form-control"
                                                name='title'
                                                value={title}
                                                onChange={(e) => setTitle(e.target.value)}
                                            />
                                        </div>
                                        ...
}

这是bookAction.js:

export const newBooks = (bookData) => async (dispatch) => {
    try {

        dispatch({ type: NEW_BOOK_REQUEST })

        const config = {
            headers: {
                 "Content-Type": "multipart/form-data"
                 // "Content-Type": "application/json"
            }
        }
        // for(var pair of bookData.entries()) {
        //    console.log(pair[0]+ ', '+ pair[1]); 
        // }

        const { data } = await axios.post('/api/v1/book/new', bookData, config)

        dispatch({
            type: NEW_BOOK_SUCCESS,
            payload: data
        })

    } catch (error) {
        dispatch({
            type: NEW_BOOK_FAIL,
            payload: error.response.data.message
        })
    }
}

这是bookController.js:

exports.createBook = async (req, res, next) => {
    console.log(req.body);
    }

我的app.js在后台:

const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
const errorMiddleware = require("./middlewares/errors");
app.use(express.json());
app.use(cookieParser());
app.use(errorMiddleware);
app.use(express.urlencoded({ extended: true }));
const book = require("./routes/book");
const auth = require("./routes/auth");
app.use("/api/v1", book);
app.use("/api/v1", auth);
app.use(errorMiddleware);
module.exports = app;

推荐答案

FormData发送multipart/form-data,因此您在app.js中使用的解析器将不起作用.最常见、最简单的方法是使用multer.首先安装它:

npm install --save multer

然后在你有urlencoded个和cookieParser个的地方使用这个:

const multer = require('multer');
const upload = multer();
app.use(upload.none())

我使用这upload.none()是因为您似乎没有发送任何文件.如果你是,你可以访问上面的链接,mutter会让你做到这一点.

此外,您还可以简化submitHandler,因 for each 表单input都有name,只需将formFormData()作为参数提供给e.target:

const submitHandler = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  dispatch(newBooks(formData));
};

Javascript相关问答推荐

如何在不指定宽度和高度的情况下显示来自网址的下一张图像

Angular 拦截器错误处理删除方法问题

在shiny 模块中实现JavaScript

reaction如何在不使用符号的情况下允许多行返回?

如何让\w token 在此RegEx中表现得不贪婪?

如何按预期聚合SON数据?

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

InDesign—创建一个独立的窗口,在文档中进行更正时保持打开状态

使搜索栏更改语言

我们如何从一个行动中分派行动

在grafana情节,避免冲突的情节和传说

Promise Chain中的第二个useState不更新

我的角模板订阅后不刷新'

覆盖TypeScrip中的Lit-Element子类的属性类型

如何创建返回不带`new`关键字的实例的类

如何在Svelte中从一个codec函数中调用error()?

如何限制显示在分页中的可见页面的数量

自定义图表工具提示以仅显示Y值

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

如何根据查询结果重新排列日期