Material UI日期选择器默认值无法正常生效问题求助

核心问题是type="datetime-local"的input对传入值的格式有严格要求，仅支持YYYY-MM-DDTHH:mm格式的字符串，你现有两处逻辑问题：

1. 传入的props.note.NoteDate是带毫秒和UTC标识的ISO 8601完整格式，不符合组件要求
2. 组件混用了defaultValue和受控模式逻辑，导致状态更新不生效

第一步：新增日期格式转换函数 #

在组件内新增工具函数，把后端返回的ISO字符串转为日期选择器可识别的格式：

// 放在组件内部或者外部工具文件都可以
const formatDateToDatetimeLocal = (isoStr) => {
  if (!isoStr) return '';
  const date = new Date(isoStr);
  const fillZero = (n) => n < 10 ? `0${n}` : n;
  // 如果需要显示UTC时间，把下面的get方法替换为getUTC开头的方法即可
  return `${date.getFullYear()}-${fillZero(date.getMonth() + 1)}-${fillZero(date.getDate())}T${fillZero(date.getHours())}:${fillZero(date.getMinutes())}`;
}

第二步：修改useEffect逻辑 #

给notedate赋值前先做格式转换：

React.useEffect (() => {
  setNoteDate(formatDateToDatetimeLocal(props.note.NoteDate));
  setNoteText(props.note.NoteText);
},[props.note.NoteDate, props.note.NoteText])

第三步：修正日期选择器的组件属性 #

删掉defaultValue，启用受控模式的value属性：

<TextField
  autoFocus
  type='datetime-local'
  margin="dense"
  id="notedate"
  value={notedate || ''}
  label="Note Date"
  fullWidth
  onChange={handleNoteDateChange}
  InputLabelProps={{
    shrink: true,
  }}
/>

第四步：按需修改提交时的日期格式 #

如果后端需要接收ISO格式的日期，在handleClose里把notedate转回去即可：

const handleClose = () => {
  let editednote = {
    NoteID: props.note.NoteID,
    NoteText: notetext,
    NoteType: props.note.NoteType,
    // 转成ISO格式再提交
    NoteDate: new Date(notedate).toISOString()
  };
  setOpen(false);
  props.SaveEditedNote(editednote); 
};

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