ReactJS：表单向数据库发送错误的日期值

Question

我正在尝试使用 Reactstrap 表单将数据发送到数据库，并且所有内容都已正确发送，但日期值除外。无论我输入什么日期，都会在 MongoDB 上保存为 1970-01-01T00:00:00.000+00:00，我不知道为什么。

当我通过 Postman 发送所有内容时，它保存了正确的值，但我想从表单中提交。

表单日期字段：

<Form onSubmit={this.onSubmit}>
   <FormGroup>
      <Label className="lead">Horário local da leitura</Label>
      <Input type="text" name="hora_leitura" required />

onSubmit 函数

onSubmit = (e) => {
    e.preventDefault();

    const {
      hora_leitura, pressao_atm, temp_ar, temp_min, temp_max,
      umid_rel, umid_min, rad_solar, chuva_ac_dia, inten_vento,
      direc_vento,
    } = this.state;
    const newEntry = {
      hora_leitura, pressao_atm, temp_ar, temp_min, temp_max,
      umid_rel, umid_min, rad_solar, chuva_ac_dia, inten_vento,
      direc_vento,
    };

    // Add entry via addEntry action
    this.props.addEntry(newEntry);
  };

onChange 函数

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

POST条目API代码：

router.post("/", (req, res) => {
  const {
    hora_leitura, pressao_atm, temp_ar, temp_min, temp_max, umid_rel,
    umid_min, rad_solar, chuva_ac_dia, inten_vento, direc_vento,
  } = req.body;

  Entry.findOne({ hora_leitura }).then((isMatch) => {
    if (isMatch)
      return res
        .status(400)
        .json({ msg: "Uma entrada com essa data já existe" });
    else {
      const newEntry = new Entry({
        hora_leitura, pressao_atm, temp_ar, temp_min, temp_max, umid_rel,
        umid_min,rad_solar, chuva_ac_dia, inten_vento, direc_vento,
      });
      newEntry.save().then((entry) => res.json(entry));
    }
  });
});

不知道为什么它没有发送正确的日期。如果您能提供帮助并解释您的答案，那就太好了。

编辑：

在我的 EntryModal class 状态下，我有这个

state = {
    modal: false,
    added: false,
    hora_leitura: new Date(), 
    pressao_atm: 0,
    temp_ar: 0,
    temp_min: 0,
    temp_max: 0,
    umid_rel: 0,
    umid_min: 0,
    rad_solar: 0,
    chuva_ac_dia: 0,
    inten_vento: 0,
    direc_vento: "",
    msg: null,
  };

我在 onSubmit() 上调用 addEntry 的正上方放了一个 console.log，它显示 hora_leitura 作为发送表格的确切日期，而不是我的日期插入。我不知道我的代码是否读取了 onChange.

上的正确日期值

Answer 1

经过一些测试，我注意到，要更改我在状态上设置的值，我必须在元素上调用 onChange，就像我在表单上的每个输入上所做的那样，但在 <Input type="text" name="hora_leitura" required />，所以我在此输入中输入的任何值都无关紧要。

我刚刚将输入更改为：

<Input
  type="text"
  name="hora_leitura"
  placeholder="2020-06-12T09:00:00.000"
  onChange={this.onChange} // this is what was missing
  required
/>

而且效果很好。

ReactJS：表单向数据库发送错误的日期值

ReactJS: form sends wrong date value to database

forms

mongodb

reactjs

reactstrap