Javascript 如何使用将 MUI datepicker 字符串值插入对象状态

我正在创建一个带有描述、优先顺序和日期的待办事项 list .我通过使用调用{inputChanged}的Textfield来获取优先级和描述.{InputChanged}设置todo.Description和todo.first，并且datepicker的{handleDateChange}函数应将todo.date作为字符串插入到状态中.在此之后，按下一个按钮将调用{addTodo}，它会将整个待办事项状态添加到[待办事项]状态数组中，然后我可以在其中显示和删除项目.我能够显示其中的2个，并删除项目没有问题.

但是，我不知道如何使用DesktopDatePickers值在{inputChanged}函数之外设置todo.date.我可以将{selectedDate.toString()}登录到控制台，并以"清华，2022年11月24日22:00:00 GMT"的格式获得一个值(基于我 Select 的日期、月份和年份)，但我也不知道如何将其添加为todo.date.

而且，每当第一次从这两个文本字段中读取输入时，都会收到一条警告:"一个组件正在将非受控输入更改为受控".我在谷歌上搜索了几次，但认为这是因为初始状态设置错误，或者与试图仅更改3个TODO状态对象中的2个有关.此警告似乎不会影响功能，因为它警告的代码部分仍按预期运行，但与此相关的提示也值得赞赏.

希望这其中的一些内容是有意义的，因为您可以从下面的解释和代码中看出，我是一个初学者，一些代码片段可以工作，但老实说，我不能把它们的功能教给任何人.感谢您提前给我所有的答复.(我已经决定排除进口产品，但我确信不是进口产品导致了这个问题.)

说

function Todolist() {
  const [todo, setTodo] = useState({description: '', date: '', priority:''});
  const [todos, setTodos] = useState([]);
  const gridRef = useRef();

  const inputChanged = (event) => {
    setTodo({...todo, [event.target.name]: event.target.value});
  }
  const addTodo = (event) => {
    setTodos([...todos, todo]);
    console.log(selectedDate)
  }
  const deleteTodo = () => {
    if (gridRef.current.getSelectedNodes().length > 0){
    setTodos(todos.filter((todo, index) =>
      index !== gridRef.current.getSelectedNodes()[0].childIndex))
  } else {
    alert('Select row first')
  }
}
  const columns = [
    {headerName: 'Date', field: 'date', sortable:true, filter: true, floatingFilter: true },
    {headerName: 'Description', field: 'desc', sortable:true, filter: true, floatingFilter: true },
    {headerName: 'Priority', field: 'prio', sortable: true, filter: true, floatingFilter: true}
   ]
  const [selectedDate, setSelectedDate] = useState(null)

  const handleDateChange = (newValue)=>{
    setSelectedDate(newValue)
        console.log(selectedDate)        
  }
  
  return (    
    <div className='App'>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TabApp/>
        <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">

          <DesktopDatePicker
            views={["day", "month","year"]}
            label="Date"
            inputFormat="MM/DD/YYYY"
            value={selectedDate}
            onChange={handleDateChange}
            renderInput={(params) => <TextField {...params} />}
            name="date"
            />
              
            <TextField
              label="Description"
              variant="standard"
              name="desc" value={todo.desc}
              onChange={inputChanged}
              />
            <TextField
              label="Priority"
              variant="standard"
              name="prio" value={todo.prio}
              onChange={inputChanged}
              />

            <Button onClick={addTodo} variant="contained">Add</Button>
            <Button onClick={deleteTodo} variant="contained">Delete</Button>
        </Stack>
      </LocalizationProvider>
              

      <div
      className="ag-theme-material"
      style={{
        height: '700px',
        width: '80%',
        margin: 'auto'
      }}
      >
        <AgGridReact
        animateRows={true}
        ref={gridRef}
        onGridReady = {params => gridRef.current = params.api}
        rowSelection='single'
        columnDefs={columns}
        rowData={todos}>
        </AgGridReact> 
      </div> 
    </div>
  );
};

说

我try 了几种解决方案，大多数都归结为找到一种方法来设置Todo.date. 我try 的一种方法是基于{inputChanged}的功能

const handleDateChange = (newValue)=>{
    setSelectedDate(newValue.toString())
    setTodo({...todo, [todo.date]: selectedDate})      
  }

这不会导致错误，但在调用sole.log(Todo)时会看到以下内容: "":空 日期:"" 描述:"ASD" 描述:"" PRIO:"ASD" 优先级:"" 老实说，我不知道这是什么意思，除了值被打印了两次，第一个"日期"就是空的.