首页 > 解决方案 > 请求成功,但是表单提交的字段数据没有提交到数据库中?

问题描述

每当我提交表单时,唯一添加到数组中的是 objectId 而不是我在表单中拥有的字段。

为了更清楚: Thefaq是 blogSchema 中的一个数组,如下所示:

faq:[
    {
        ques:{
            type:String
        },
        ans:{
            type:String
        }
    }
]

在来自前端的每个提交请求上,一个常见问题解答应使用 和 添加到数组quesans。但是在提交请求时,faq 中唯一添加的是 objectId。

put请求的后端代码是:

exports.createFaq=async (req,res)=>{
    const slug=req.params.slug.toLowerCase()
    const {ques,ans}=req.body
    const newFaq={ques,ans}
    try {

       const material= await Material.findOne({slug})
        material.faq.unshift(newFaq);
        await material.save();
        res.json(material)

    } catch (err) {
        console.error(err.message);
        res.status(500).send('server error')
        
    }
}

表单的前端代码是

import React,{useState,useEffect} from 'react'
import { withRouter } from 'next/router';
import { getCookie} from '../../../actions/auth';
import {createFaqs} from '../../../actions/material'


const AddFaq = ({router}) => {
    const [formData,setFormData]=useState({
        ques:'',
        ans:''
    });
    const token = getCookie('token');

    const {ques,ans}=formData


    const submit = e => {
        const slug=router.query.slug
        e.preventDefault();
        createFaqs(formData, token,slug).then(data => {
            if (data.error) {
                setFormData({ ...formData, error: data.error });
            } else {
                setFormData({ ...formData, ques:'',ans:'',  error: '', success: `Faq added to blog titled  is created` });
 
            }
        });
    };

    const handleChange=e=>setFormData({...formData,[e.target.name]:e.target.value});


    return (
        <>
        <section className="container">
            <h1 className="large">
                Create faq for the blog
            </h1>
            <div className="my-1">
            <form className='form' onSubmit={submit}>
            <div className="form-group">
                <input type="text" name='ques' value={ques} onChange={e=>handleChange(e)} />
            </div>
            <div className="form-group">
                <input type="text" name='ans' value={ans} onChange={e=>handleChange(e)} />
            </div>
            <button type="submit" className="btn nbtn btn-dark my-1">Publish</button>

        </form>
            </div>
        </section>
            
        </>
    )
}

export default withRouter(AddFaq);

如果您对此有所了解,请提供帮助。非常感谢

createFaq是调用 api 的函数formDatatoken用于身份验证和slug我们要添加的博客的常见问题解答

标签: node.jsreactjsmongodbexpress

解决方案


推荐阅读