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

Posted 2023-03-23

【中文标题】ReactJS：表单向数据库发送错误的日期值

【英文标题】：ReactJS: form sends wrong date value to database

【发布时间】：2020-10-21 07:37:28

【问题描述】：

我正在尝试使用 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 班级状态中，我有这个

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 上的正确日期值。

【问题讨论】：

您如何在该州保存您的日期，或者您如何选择更准确？

@Slavian 首先我在状态中设置了 date: 0，然后它应该在与表单相同的类中的 onChange 方法上通过this.setState( [e.target.name]: e.target.value ); 更新为新值。

【参考方案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
/>

而且效果很好。