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
}

他们我像这样为猫鼬设置模式

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
      }
    }
  },

他们是我的路由器帖子（快递）

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...

他们输入设置索引值（我使用名称属性来定义我将如何设置新项目）：

  <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": ""

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

多谢你们。塞巴

标签： javascriptnode.jsreactjsmongodbexpress

Answer 1

问题在于您的setStateReactJS 调用。

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

Thetarget.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对象。这将帮助您简单地更新状态，而无需解析索引键。