reactjs - 在 React 中提交两个表单。一个返回字符串，另一个返回 json

Question

我正在为 React 中的站点构建我的第一个管理区域。我正在使用猫鼬和 MongoDB。当我提交表单以将艺术家添加到数据库时，它会正确执行所有操作，并且我可以看到它以 JSON 对象的形式返回数据。当我提交一个向艺术家添加一件艺术品的表单时，它看起来可以工作，但实际上并没有向数据库添加任何内容，因为数据是作为字符串发送的。我相信唯一的区别是一条路线是 POST，一条路线是补丁。我找不到任何其他区别。如何让我的表单以 JSON 而不是字符串的形式发送数据。

我的模特

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const artistSchema = new Schema({
    first_name: { type: String, required: true },
    last_name: { type: String, required: true },
    artist_painter: { type: Boolean, required: false},
    artist_sculptor: { type: Boolean, required: false},
    artist_other: { type: Boolean, required: false},
    featured_image: { type: String, required: false},
    artwork:[
        {
        type: { type: String, required: false},
        title: { type: String, required: false},
        width: { type: Number, required: false},
        length: { type: Number, required: false},
        depth: { type: Number, required: false},
        image: { type: String, required: false},
        media: { type: String, required: false},
        price: { type: Number, required: false},
        newRelease: { type: Boolean, required: false}
        }   
]
});

const Artist = mongoose.model("Artist", artistSchema);

module.exports = Artist

API 路由

   // Matches with "/api/artists"
router.route("/")
  .get(artistsController.findAll)
  .post(artistsController.create);

// Matches with "/api/artists/:id"
router
  .route("/:id")
  .get(artistsController.findById)
  .put(artistsController.update)
  .delete(artistsController.remove);

// Matches with "/api/artists/art/:id"
router
  .route("/art/:id")
  .patch(artistsController.addArtById)

module.exports = router;

艺术家控制器

const db = require("../models");

// Defining methods for the ArtistsController
module.exports = {
  findAll: function(req, res) {
    db.Artist
      .find(req.query)
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  },
  findById: function(req, res) {
    db.Artist
      .findById(req.params.id)
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  },
  create: function(req, res) {
    db.Artist
      .create(req.body)
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  },
  update: function(req, res) {
    db.Artist
      .findOneAndUpdate({ _id: req.params.id }, req.body)
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  },
  remove: function(req, res) {
    db.Artist
      .findById({ _id: req.params.id })
      .then(dbModel => dbModel.remove())
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  },
  addArtById: function(req, res) {
    db.Artist
    .findOneAndUpdate({ _id: req.params.id }, {$push: { artwork: req.body } } )
    .then(dbModel => res.json(dbModel))
    .catch(err => res.status(422).json(err));
  },

};

标签： reactjsmongodbmongooseaxios