如何获取首次渲染组件时显示的日期?MERN堆栈

Question

我已经创建了一个表单，由用户填写，然后可以更新。当表单呈现为更新时，存储在用户数据库条目中的日期将不会显示。我得到这个错误：指定的值"；1987年7月27日星期一20:00:00 GMT-0400(东部夏令时("；不符合要求的格式；yyyy-MM-dd"；

我有另一个表单，它似乎工作得很好，但由于某种原因，这个表单在呈现时不会加载日期。

这就是表格最初提交和更新的日期设置方式：

<div>
<label>Date of birth</label>
<input name="dateOfBirth" label="Date of birth" type="date" value={dateOfBirth} onChange={(e)=> setDateOfBirth(e.target.value)} />
</div>

这就是加载状态的方式：

const HHForm = ({user, userState}) => {
const [dateOfBirth, setDateOfBirth] = useState(userState?.healthHistory[0]?.dateOfBirth ? ((userState?.healthHistory[0]?.dateOfBirth) : (''))

但是，当组件渲染以更新表单时，日期只是作为一个空的日期选择器，就好像没有日期数据一样，但数据库中有一个dateOfBirth条目。

Answer 1

HTML 5日期选择器的格式应为yyyy-MM-dd。你应该格式化你的约会。您可以使用瞬间来执行此操作。https://www.npmjs.com/package/moment

import moment from 'moment'
setState(moment(your date here).format('YYYY-MM-DD'))

这是完整的代码https://codesandbox.io/s/date-picker-76lgw?file=/src/App.js