当前位置: 首页 > 知识库问答 >
问题:

如何在MERN堆栈应用程序中发送多个数据?

公良渝
2023-03-14

我需要帮助在类别上发布多个数据,当我在选择输入上选择多个数据并提交时,它会抛出错误。请参阅下面的错误

  setSelected = (selected) => {
    this.setState({ selected });
  };
  handleSubmitPost = (e) => {
    const selected = this.state.selected;
    let select = [];
    for (let i = 0; i < selected.length; i++) {
      select = [...select, selected[i].value];
    }
    console.log(select);
    e.preventDefault();
    const fd = new FormData();
    fd.append("title", this.state.title);
    fd.append("category", select);
    fd.append("article", this.state.article);
    fd.append("blogImage", this.state.blogImage);

    axios
      .post(`http://localhost:5000/posts`, fd)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => console.log(err));
  };

下面是模型模式。模型

const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  category: [
    {
      type: Schema.Types.ObjectId,
      ref: "PostCategory",
    },
  ],
  article: { type: String, required: true },
  blogImage: { type: String, required: true },
  createdAt: { type: Date, default: Date.now },
});

这是我的路线文件。路线

router.post("/", upload.single("blogImage"), async (req, res) => {
  const { title, article, createdAt, category } = req.body;

  const newPost = new Post({
    title,
    category,
    article,
    createdAt,
    blogImage: req.file.path,
  });
  try {
    const savedPost = await newPost.save();
    res.json(savedPost);
  } catch (err) {
    res.status(400).send(err);
  }
});

当我在输入选择上选择多个时,这是我提交时的错误。

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

但当我只选择一个时,它就会通过。我只能保存一个在五月类别字段,我想保存多个在我的类别字段。

共有1个答案

东门航
2023-03-14

您将得到一个400的错误。看起来axios post请求是向http://localhost:5000/posts发出的,但是,服务器代码中似乎没有“/posts”路由。尝试更改服务器代码以接受“/posts”处的post请求。见下文:

router.post("/", upload.single("blogImage"), async (req, res) => {

// vs 

router.post("/posts", upload.single("blogImage"), async (req, res) => {

或者,您可以从axios请求中删除posts路由,并向http://localhost:5000发出请求。

 类似资料:
  • 我正在尝试将Google Maps添加到我的MERN Stack应用程序中。根据一些消息来源,我发现在create-react-app中添加.env文件并不能解决隐藏API_Keys(https://create-react-app.dev/docs/adding-custom-environment-variables/)的目的。如何将API_KEYS存储在后端(node.js)中并从React

  • 我正在尝试从数据库中提取数据。我从回应中得到的都是这样的: 我需要帮助如何在前端和后端提出请求: 以下是ReactJS方面: 以下是请求的服务器端: 以下是ProductService: 附注:产品在MongoDB Compass中创建时没有错误:

  • 节目视图:截图 这是一个MERN项目: 我正在开发一个web应用程序,可以对公司模型进行用户CRUD操作。 我已经执行了Get-Add-Delete操作,但我对更新操作感到困惑。 我想使用我的CompanyModal(它是一个用于添加公司的引导模式)组件模式来编辑公司。 你能给点提示或建议做这件事吗?其实我脑子一片空白。

  • 我正试图找到一种方法来更新我的“用户”状态,但我在这里已经停留了3天,我需要一些帮助。 下面是我的用户上下文: 这里是我试图更新用户的地方。在我的例子中,我试图在user.cart数组中推送一个对象,因为后端的一切都很好,但在前端,状态不更新: > 首先使用UserContext: const Products=()=>{ 然后我试图更新用户状态,但当我单击该按钮时,它将我注销: 将我注销后,Us

  • 我已经有一个stack类在工作,但是现在我每次只能弹出一个元素,我希望能够同时弹出多个元素。无需多次使用推送和弹出。我试图创建两个函数来实现这一点。函数pushAll和popN。比如: 备注:输入参数all是一个数组,包含所有必须输入的元素。向量的最后一个元素必须在叠加后位于顶部。如果没有空间插入所有元素,则必须不插入任何元素,并且必须引发StackFullException异常。popN方法弹出

  • 我如何编辑我的函数以从我的用户状态中删除项目?在user.cart中,它是数组。 函数如下: 下面是按钮: