如何将MUI DatePicker字符串值存入对象状态及解决受控组件警告

问题1：DesktopDatePicker无法将日期存入todo.date #

原因 #

React状态遵循不可变原则，直接修改todo对象的属性（比如todo.date = newDate.toString()）不会触发状态更新；如果更新时没有正确合并原有属性，还会导致对象结构异常（比如属性重复、date值为空）。

解决方案 #

在handleDateChange中，通过函数式更新获取最新的todo状态，并用展开运算符创建新对象，合并原有属性与新的date值：

const handleDateChange = (newDate) => {
  setSelectedDate(newDate);
  const dateStr = newDate.toString();
  // 函数式更新确保拿到最新状态，展开运算符合并属性
  setTodo(prevTodo => ({ ...prevTodo, date: dateStr }));
}

这样React能正确识别状态变化，todo.date会被正确赋值为日期字符串。

问题2：首次输入时出现"A component is changing an uncontrolled input to be controlled"警告 #

原因 #

初始todo状态中，description或priority属性为undefined，导致TextField的value初始值是undefined（非受控状态）；当用户输入后，value变为字符串（受控状态），触发React的状态切换警告。

解决方案 #

初始化todo状态时，给所有需要绑定输入框的属性设置空字符串默认值，确保输入框从一开始就是受控状态：

// 初始化todo状态，所有属性设为空字符串
const [todo, setTodo] = useState({
  description: '',
  priority: '',
  date: ''
});

同时，inputChanged函数也要用正确的方式更新状态，避免直接修改原对象：

const inputChanged = (e) => {
  const { name, value } = e.target;
  // 函数式更新+展开运算符，合并原有属性与新输入值
  setTodo(prevTodo => ({ ...prevTodo, [name]: value }));
}

这样输入框始终处于受控状态，警告会自动消失。

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