React使用MUI DesktopDatePicker报读取undefined的value错误及日期同步方案

• DesktopDatePicker的onChange回调返回值是选中的Date对象，不是原生事件对象，你代码中尝试访问e.target.value时，e本身就是Date实例，不存在target属性，所以抛出了Cannot read properties of undefined (reading 'value')错误。
• renderInput的参数命名和外层的incomeRecord状态变量重名，会造成作用域覆盖，属于潜在隐患。

1. 修改onChange回调逻辑，直接用返回的Date对象更新状态即可
2. 修改renderInput的参数名避免命名冲突，DesktopDatePicker内部已经处理了和关联TextField的状态同步，无需额外写逻辑处理值同步。

import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import { Grid, TextField, Button } from "@mui/material";
import { useState } from "react";

const [incomeRecord, setIncomeRecord] = useState({
    date: new Date(),
    shopSales: "",
    payPoint: "",
});

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DesktopDatePicker
    label="Date"
    inputFormat="MM/dd/yyyy"
    value={incomeRecord.date}
    // 这里直接接收返回的Date对象更新状态
    onChange={(newDate) =>
      setIncomeRecord({ ...incomeRecord, date: newDate })
    }
    // 参数名改为params避免和外层state重名，传入TextField后自动同步日期值
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

<TextField
    className="txtlabel"
    variant="outlined"
    label="Shop Sales"
    value={incomeRecord.shopSales}
    onChange={(e) =>
      setIncomeRecord({ ...incomeRecord, shopSales: e.target.value })
    }
></TextField>

修复后日期选择器的选中值会自动同步到绑定的TextField输入框中，无需额外开发逻辑。

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