如何使用insert MUI datepicker string value into object state？

Question

我正在创建一个包含描述、优先级和日期的待办事项列表。 我通过使用调用 {inputChanged} 的 TextField 获得优先级和描述。 {InputChanged} 设置 todo.description 和 todo.priority 并且 DatePicker 的 {handleDateChange} function 应该将 todo.date 作为字符串插入到 state 中。在此之后，按下按钮调用 {addTodo} 将整个待办事项 state 添加到 [todos] state 数组，然后我可以从中显示和删除项目。 我能够显示其中的 2 个，并且可以毫无问题地删除项目。

但是，我不知道如何使用 DesktopDatePickers 值在 {inputChanged} function 之外设置 todo.date。 我可以将 {selectedDate.toString()} 记录到控制台并获取格式为“2022 年 11 月 24 日星期四 22:00:00 GMT”（基于我选择的日期、月份和年份）的值，但我还是不知道如何将其添加为 todo.date。

我也，每当第一次从任一文本字段读取输入时，都会收到警告“组件正在将不受控制的输入更改为受控制”我在谷歌上搜索了几次但假设这是因为错误设置了初始 state 或有一些东西与尝试仅更改 3 个 todo state 对象中的 2 个有关。 此警告似乎不会影响功能，因为它警告的代码部分仍然如预期的那样为 function，但是与此相关的提示也很受欢迎。

希望其中一些是有道理的，正如您可能从下面的解释和代码中看出的那样，我是一个初学者，一些代码片段可以工作，但老实说我无法将它们的功能教给任何人。 提前感谢所有答案。 （我已经决定排除进口，但我确定这些不会导致问题。）

`

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>
  );
};

`

我尝试了几种解决方案，大多数归结为找到一种方法以某种方式设置 todo.date 的想法。 我尝试的一种方法是基于 {inputChanged} 的功能

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

这不会导致错误，但在调用 console.log(todo) 时会看到以下内容：“”：null 日期：“”desc：“asd”描述：“”prio：“asd”优先级：“”老实说我不我不知道该怎么做，除了这些值被打印两次并且第一个“日期”只是 null。

Answer 1

当前，当您运行此行时：

setTodo({...todo, [todo.date]: selectedDate});

它尝试获取 todo.date 的值（这是一个空字符串）作为键，然后将值（selectedDate）分配给键（“”）。

为了解决这个问题，你应该像这样自己给钥匙：

const handleDateChange = (newValue)=> {
    const newSelectedDate = newValue.toString();
    setSelectedDate(newSelectedDate)
    setTodo({...todo, date: newSelectedDate})      
}

还有关于这个警告：“一个组件正在将不受控制的输入更改为受控”，这是因为 selectedDate 的初始值为 null。将其更改为“(new Date()).toString()”将修复您的警告.

const [selectedDate, setSelectedDate] = useState((new Date()).toString());