如何将Material UI DatePicker选中的日期同步更新到React表单状态

现有代码的问题 #

• 日期同步逻辑绑定在普通文本输入的handleChange事件上，只有用户修改其他文本字段时才会把选中的日期同步到主表单状态。如果用户选完日期直接提交、没有操作其他输入框，inputValues.date会保留初始空值，导致数据丢失。
• 状态更新直接使用闭包中缓存的inputValues，连续快速输入时可能拿到过期的旧状态，造成字段更新覆盖。

推荐实现：无需useEffect，统一表单状态 #

这是最简洁、性能最好的实现方式，完全不需要额外维护独立的日期状态，从根源上避免跨状态同步的问题

1. 移除独立的date状态，将日期字段直接收敛到主表单状态对象中：

const [inputValues, setInputValues] = useState({
  title: "",
  category: "",
  description: "",
  city: "",
  venue: "",
  date: null, // 日期初始值和原独立状态保持一致
});

2. 优化普通文本输入的变更处理函数，使用函数式更新避免闭包旧值问题：

const handleChange = (event) => {
  const { name, value } = event.target;
  setInputValues(prev => ({
    ...prev,
    [name]: value
  }));
};

3. 直接在DatePicker的onChange回调中更新主表单状态的date字段，不需要额外中转：

<DatePicker
  value={inputValues.date}
  onChange={(newDate) => {
    setInputValues(prev => ({
      ...prev,
      date: newDate
    }))
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      size="small"
      fullWidth
      variant="outlined"
    />
  )}
/>

普通文本输入的TextField代码不需要做任何改动，原有逻辑可以正常运行。

备选方案：必须保留独立date状态时用useEffect同步 #

如果你的业务场景有特殊要求，必须单独维护date状态（比如日期选中后要触发其他和表单无关的独立逻辑），可以使用useEffect监听date的变化自动同步：

import { useState, useEffect } from 'react';

// 原有两个状态保留
const [date, setDate] = useState(null);
const [inputValues, setInputValues] = useState({
  title: "",
  category: "",
  description: "",
  city: "",
  venue: "",
  date: "",
});

// 监听date变化，同步到主表单状态
useEffect(() => {
  setInputValues(prev => ({
    ...prev,
    date
  }))
}, [date])

// 普通文本输入的handleChange去掉手动写date的逻辑
const handleChange = (event) => {
  const { name, value } = event.target;
  setInputValues(prev => ({
    ...prev,
    [name]: value
  }));
};

注意：该方案会产生额外的重渲染——日期选中后先更新独立date状态触发第一次渲染，useEffect执行后更新inputValues触发第二次渲染，性能弱于统一状态的方案，非必要不推荐使用。

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