更改日期和時間后，DatePicker 顯示舊值（React、DatePicker）

Question

我有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 （仍然顯示舊值）。

Answer 1

為什么不把dateVisit state 放在 DatePicker 的value prop 中呢？

你應該能夠把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
  />

Answer 2

試試這個方法

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                                           
   ......
 />

Answer 3

我根據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
/>