Reactjs React JS Material UI，指定复杂对象时日期时间选择器不更改日期

我是一个新的反应开发和使用材料用户界面。我需要开发一个具有动态列的表，其中包含日期和时间输入控件的add行。 我计划维护一个对象数组，并将每个对象设置为日期和时间选择器的值。最初是设置状态时设置的值，之后当日期或时间更改时，更改不会显示在控制器中

下面是将对象数组添加到状态的代码的缩小版本。单击按钮或更改时间或日期选择器时，它将不会显示在控件中

我注意到的一点是，当我在更改控件后更改代码（在代码中的随机位置添加空格）时，这些更改会得到反映

    import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialUIPickers() {

  let addRowData: {
    sessionItem: string,
    sessionTimes: { headder: string, startTime: Date | null, endTime: Date | null }[]
} = {
    sessionItem: "Test",
    sessionTimes:[{ headder: "Test", startTime: new Date('2014-08-18T21:11:54'), endTime: new Date('2014-08-18T21:11:54') }]
};

  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(
    addRowData
  ); 

  const handleDateChange = (date: Date | null) => {
    selectedDate.sessionTimes[0].startTime=date;
    setSelectedDate(selectedDate);
  };   

const onButtonClick = ()=>{
  selectedDate.sessionTimes[0].startTime=new Date();
  setSelectedDate(selectedDate);
}

  return (
    <Grid container justify="space-around">
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          value={selectedDate.sessionTimes[0].startTime}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          format="MM/dd/yyyy"
          value={selectedDate.sessionTimes[0].startTime}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
        <KeyboardTimePicker
          margin="normal"
          id="time-picker"
          value={selectedDate.sessionTimes[0].startTime}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change time',
          }}
        />
    </MuiPickersUtilsProvider>
    <input type="Button" value="set" onClick={onButtonClick}/>
      </Grid>
  );
}

导入“日期fns”；
从“React”导入React；
从“@material ui/core/Grid”导入网格；
从“@date io/date fns”导入DateFnsUtils；
进口{
MuiPickersUtilsProvider，
键盘时间选择器，
键盘日期选择器，
}来自“@material ui/pickers”；
导出默认函数MaterialUIPackers（）{
让addRowData：{
sessionItem：字符串，
会话时间：{header:string，startTime:Date | null，endTime:Date | null}[]
} = {
Sessionite：“测试”，
会话时间：[{标题：“测试”，开始时间：新日期（'2014-08-18T21:11:54'），结束时间：新日期（'2014-08-18T21:11:54'）]
};
//物料界面的第一次提交
常量[selectedDate，setSelectedDate]=React.useState(
addRowData
); 
const handleDateChange=（日期：date | null）=>{
已选择日期。会话时间[0]。开始时间=日期；
设置选定日期（选定日期）；
};   
常量onButtonClick=（）=>{
selectedDate.sessionTimes[0]。startTime=new Date（）；
设置选定日期（选定日期）；
}
返回(
);
}