更改日期和时间后，DatePicker 显示旧值（React，DatePicker）答案

【问题标题】：After changed Date&Time, DatePicker showing old value (React, DatePicker)更改日期和时间后，DatePicker 显示旧值（React，DatePicker）
【发布时间】：2020-12-01 13:21:51
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native datetime time datepicker

【解决方案1】：

为什么不把 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
  />

【讨论】：

现在 DatePicker 显示来自 state.dataFiresStamp 的错误日期 - 它显示的是实际日期时间（现在）
您的意思是 defaultValue 不起作用？如果你给 value={ dateVisit || 怎么办？ state.dataFiresStamp}（因此当 dateVisit 为 null、未定义或 false 时，您将看到 state.dataFiresStamp 日期）而不是 dateTime（现在）
当我按照@Shani 所说的那样做时，我的DatePicker 加载时是not taking date from state - 但是是display current Date&Time（类似于 DateTime.Now()...但是当我选择/更改时日历中的日期 - 这工作正常

【解决方案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                                           
   ......
 />

【讨论】：

React Hook "useLocation" is called in function "setLocDate" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
我得到白屏并进入控制台很多错误：Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use parseISO` 来解析字符串。见：git.io/fjule`
dataFiresStamp = "2020 年 12 月 24 日 14:30"
这样使用import { parseISO, format } from 'date-fns';parseISO('24 december 2020, 14:30')
我把它做setDateVisit(parseISO(state.dataFiresStamp));，然后得到Uncaught RangeError: Invalid time value

【解决方案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
/>

【讨论】：