React组件日期格式不一致，如何将DOB值正确赋值给birthday？

问题根因 #

• 你在console中看到的输出格式差异只是Date对象的不同字符串表现形式，本质二者都是JS原生Date类型，不存在类型不匹配的问题
• 你目前无法把dob赋值给birthday的核心原因是：你在FlatInfo组件里维护了独立的dob本地状态，没有和父组件formData里的birthday字段做同步

解决方案 #

方案1：提交时同步更新birthday（改动最小） #

在FlatInfo组件的onSubmit验证通过分支里，手动调用setForm更新birthday字段即可，代码修改如下：

}else{
  // 新增这一行，把dob赋值给formData的birthday
  // 如果你的react-hooks-helper版本不支持直接传键值对，就换成props.setForm({ target: { name: 'birthday', value: dob } })
  props.setForm({birthday: dob})
  navigation.next();
  setBirthday();
  //Update the user details
  props.updateUser({['firstName']:firstName});
  props.updateUser({['lastName']:lastName});
  props.updateUser({['DOB']: dob});
}

方案2：去掉冗余的dob状态，直接绑定formData（更推荐） #

你不需要单独维护dob本地状态，可以直接让DatePicker和父组件的formData.birthday绑定，减少重复状态维护成本：

1. 删除FlatInfo里以下两行冗余代码：

const [dob, setDOB] = useState(new Date());
const setBirthday = () => {
  console.log(birthday);
  console.log(dob);
}

2. 修改DatePicker的属性，直接绑定formData的birthday：

<DatePicker
  label = "D.O.B"
  onChange={(val) => props.setForm({ birthday: val })}
  value={props.formData.birthday}
/>

3. 对应修改校验逻辑里所有用到dob的地方，替换成props.formData.birthday即可。

格式统一说明 #

如果后续需要固定展示日期格式，直接调用Date对象的内置方法转换即可：

• 转国际标准ISO格式：date.toISOString()
• 转本地时区可读格式：date.toLocaleString()
• 自定义格式可以用Intl.DateTimeFormat或者第三方日期库处理

内容的提问来源于stack exchange，提问作者Daniel