MUI DateTimePicker触发onError时无法修改myError值的问题

问题出在useState的异步更新特性，你直接展开value时拿到的可能是旧状态，导致myError的更新没有生效。另外需要补充错误状态的重置逻辑，避免用户输入正确后按钮仍处于禁用状态。

修改方案1：使用函数式更新状态 #

利用useState的函数式更新，确保获取最新的状态值：

const [formState, setFormState] = useState({
  myError: false,
  dateValue: null
})

<DateTimePicker
  value={formState.dateValue}
  onChange={(newValue) => {
    // 用户修改日期时重置错误状态
    setFormState(prev => ({ ...prev, dateValue: newValue, myError: false }))
  }}
  onError={(error, value) => {
    // 函数式更新获取最新状态
    setFormState(prev => ({ ...prev, myError: true }))
  }}
/>

<button disabled={formState.myError}>提交</button>

修改方案2：拆分状态（更简洁易维护） #

将日期值和错误状态分开维护，避免对象状态的复杂操作：

const [dateValue, setDateValue] = useState(null)
const [myError, setMyError] = useState(false)

<DateTimePicker
  value={dateValue}
  onChange={(newValue) => {
    setDateValue(newValue)
    // 输入正确时重置错误状态
    setMyError(false)
  }}
  onError={() => {
    setMyError(true)
  }}
/>

<button disabled={myError}>提交</button>

关键说明 #

• 函数式更新setValue(prev => {...})可以确保拿到最新的状态快照，解决异步更新导致的旧状态问题。
• 必须在onChange中重置myError，否则用户输入正确日期后，错误状态会一直保留，按钮无法恢复启用。

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