更改 DateTime 后,DatePicker 显示旧值(React、DatePicker)

After changed Date&Time, DatePicker showing old value (React, DatePicker)

我有 DatePicker:

    import DatePicker from 'react-datepicker';

    const { state } = useLocation();
    const [dateVisit, setDateVisit] = useState(new Date());
    
    const editVist = async (e) => {
    e.preventDefault();
    
    console.log(dateVisit)
    }
    .....
    <form onSubmit={(e) => editVist(e}>
     <DatePicker
       selected={dateVisit}                                            
       onChange={date => setDateVisit(date)}
       value = {state.dataFiresStamp}                                            
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput                                            
       withPortal
      />
   </form>

值设置和显示正确。

现在我正在改变Date&Time。然后点击editVisit。进入 console 显示更正后的新日期,但 value into DatePicker has been not changed(仍然显示旧值)。

为什么不把 dateVisit 状态放在 DatePicker 的 value 属性中?

你应该可以把 state.dataFiresStamp 写成 defaultValue

<DatePicker
   selected={dateVisit}                                            
   onChange={date => setDateVisit(date)}
   value = {dateVisit} // changed here
   defaultValue={state.dataFiresStamp} //added here                                            
   timeInputLabel="Time:"
   dateFormat="MM/dd/yyyy h:mm aa"
   showTimeInput                                            
   withPortal
  />

试试这个方法

const [dateVisit, setDateVisit] = useState(new Date());
const { state } = useLocation();

const setLocDate = () => {
   // exception occurs when the Date object contains an invalid date. new Date('undefined').toISOString();
   setDateVisit(state.dataFiresStamp);  
}

useEffect(() => {
  setLocDate();
});

 
<DatePicker
   ......
   value={dateVisit}  // change here                                           
   ......
 />

我根据https://reactdatepicker.com/做了什么:

 const [dateVisit, setDateVisit] = useState();

 const editVist = async (e) => {
    e.preventDefault();
    
    let updateDateVisit;
    
    if (dateVisit === undefined) {
            updateDateVisit = state.dataFiresStamp
        } else {
            updateDateVisit = dateVisit
        }
    } 
 ...
<DatePicker
 selected={dateVisit}
 onChange={date => setDateVisit(date)}
 placeholderText={state.dataFiresStamp}  //display data                                          
 timeInputLabel="Czas:"
 dateFormat="MM/dd/yyyy h:mm aa"
 showTimeInput
 withPortal
/>