DesktopDatePicker onChange事件获取旧值问题求助

问题原因 #

Formik的setFieldValue是异步更新状态的，调用后不会立刻修改formik.values里的内容，所以你紧接着调用handleDatesChanged()时，读到的还是更新前的旧值。

解决方案1：直接传递新日期参数 #

既然已经在onChange里拿到了最新的选中日期val，直接把它传给handleDatesChanged就行，不用依赖Formik的状态更新：

<DesktopDatePicker
  inputVariant="outlined"
  id="date-picker-dialog"
  label="Return date"
  disabled={queryParameterUsed ? true : false}
  fullWidth
  name="endDate"
  onChange={(val) => {
    formik.setFieldValue("endDate", val);
    handleDatesChanged(val); // 直接传入新选中的日期
  }}
  renderInput={(params) => <TextField {...params} />}
  onBlur={formik.handleBlur}
  value={formik.values.endDate}
  inputFormat="dd/MM/yyyy"
/>

const handleDatesChanged = (newDate) => {
  console.log(newDate); // 这里就是最新的选中日期
  // 后续基于新日期的逻辑直接用newDate即可
}

解决方案2：监听Formik字段变化 #

如果你的逻辑必须依赖Formik更新后的values，可以用useEffect监听formik.values.endDate的变化，当字段更新时自动执行handleDatesChanged：

import { useEffect } from 'react';

// 其他组件代码...

// 监听endDate变化，自动执行处理函数
useEffect(() => {
  handleDatesChanged();
}, [formik.values.endDate]);

const handleDatesChanged = () => {
  console.log(formik.values.endDate); // 此时已经是更新后的最新值
}

// 修改DatePicker的onChange，只负责更新字段
<DesktopDatePicker
  inputVariant="outlined"
  id="date-picker-dialog"
  label="Return date"
  disabled={queryParameterUsed ? true : false}
  fullWidth
  name="endDate"
  onChange={(val) => {
    formik.setFieldValue("endDate", val);
  }}
  renderInput={(params) => <TextField {...params} />}
  onBlur={formik.handleBlur}
  value={formik.values.endDate}
  inputFormat="dd/MM/yyyy"
/>

两种方案的选择 #

• 方案1更高效，适合只需要用到当前选中日期的场景，不用等Formik状态更新完成。
• 方案2适合需要结合Formik中其他字段值一起处理的场景，确保所有相关状态都已更新。

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