javascript - 如何在 MERN 堆栈中定义架构和快速路由器？

Question

我需要使用像这样的 mongodb 记录:

{
    "_id": {
        "$oid": "5c09ae281646e8d8bad07d73"
    },
    "name": "somename",
    "genre": "somegenre",
    "indexes": {
        "index1": 1,
        "index2": 7,
        "index3": 7,
        "index4": 7,
        "index5": 7,
        "index6": 7,
        "index7": 7,
        "index8": 7,
        "index9": 7,
        "index10": 7,
        "index11": 7,
        "index12": 9,
        "index13": 5,
        "index14": 15,
        "index15": 8,
        "index16": 17
    },
    "date": {
        "$date": "2018-12-06T23:18:00.532Z"
    },
    "__v": 0
}

我为 Mongoose 设置了这样的架构

const ItemSchema = new Schema({
  name: {
    type: String,
    required: true
  },
  genre: {
    type: String,
    required: true
  },
  indexes: {
    type: Object,
    required: true,
    properties: {
      index1: {
        type: Number,
        required: true
      },
      index2: {
        type: Number,
        required: true
      },
      index3: {
        type: Number,
        required: true
      },
      index4: {
        type: Number,
        required: true
      },
      index5: {
        type: Number,
        required: true
      },
      index6: {
        type: Number,
        required: true
      },
      index7: {
        type: Number,
        required: true
      },
      index8: {
        type: Number,
        required: true
      },
      index9: {
        type: Number,
        required: true
      },
      index10: {
        type: Number,
        required: true
      },
      index11: {
        type: Number,
        required: true
      },
      index12: {
        type: Number,
        required: true
      },
      index13: {
        type: Number,
        required: true
      },
      index14: {
        type: Number,
        required: true
      },
      index15: {
        type: Number,
        required: true
      },
      index16: {
        type: Number,
        required: true
      }
    }
  },

他们是我的路由器帖子( express )

router.post("/", (req, res) => {
  const newItem = new Item({
    name: req.body.name,
    genre: req.body.genre,
    indexes: {
      index1: req.body.indexes.index1,
      index2: req.body.indexes.index2...

它们是设置索引值的输入(其中我使用 name 属性来定义我将如何设置新项目):

  <input
    type="text"
    name="indexes.index1"
    placeholder="sample 1"
    onChange={this.onChange}
  />

以及功能

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

和

onSubmit = e => {    
    const newItem = {
      name: this.state.name,
      genre: this.state.genre,
      indexes: {
        index1: this.state.indexes.index1,
...

MongoDB 中的结果是:

{
    "_id": {
        "$oid": "5c0c22d41e3d5115dda930aa"
    },
    "name": "name",
    "genre": "somegen",
    "indexes": {
        "index1": "",
        "index2": ""

索引中没有值 任何想法？有什么建议吗？

谢谢大家。 塞巴

Answer 1

问题出在您的 setState ReactJS 调用中。

onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
};

target.name 始终是一个字符串，因此您要做的是使用包含 . ( indexes.index1 ) 的键设置属性，因此 onChange 事件后的状态如下所示:

state = {
    "name": "name",
    "genre": "somegen",
    "indexes.index1": "1",
    "indexes.index2": "2",
    ...
}

express 无法识别此信息，并且您的请求无法提供正确的正文。

您可以通过将索引以某种方式转换为对象来实现您想要的目的。最简单的设置方法是:

onChange = e => {

    if ( e.target.name.indexOf( "indexes" ) === 0 ) {
        this.setState({ indexes: Object.assign( this.state.indexes || {}, {
            [e.target.name.replace(/^indexes\./, "")]: e.target.value
        } ) } );
    } else {
        this.setState({ [e.target.name]: e.target.value });
    }
};

如果您的应用程序结构允许，您可以将定义索引的输入移动到另一个组件中，该组件将作为整个 indexN 对象的回调。这将帮助您简单地更新状态，而无需解析索引键。