未捕获的 RangeError：react-DatePicker 上的时间值无效答案

【问题标题】：Uncaught RangeError: Invalid time value on react-DatePicker未捕获的 RangeError：react-DatePicker 上的时间值无效
【发布时间】：2021-08-09 06:54:24
【问题描述】：

我有一个React 组件作为Form，它有一些text input 和一个DatePicker 控件。我使用react-bootstrap-table-next 库在表格上显示输入，该库无法直接显示date，形成DatePicker，我需要先转换为JSON.parse(JSON.stringify(dueDate)，然后再转换为moment(dueDate).format("yyyy-MM-DD"); 才能显示。但是，当我尝试编辑日期时，这种转换会产生问题。我必须发回日期，因为它是 DatePicker 呈现的。这是发生错误 (Uncaught RangeError: Invalid time value) 的地方。

表单组件：只提供需要的部分代码

const Form = ({
    ...
    dueDate, 
    setDueDate
}) => {

const updateTodo = (dueDate, id, completed) => {
    const newTodo = todos.map(
        (todo) =>todo.id === id ? 
            {dueDate, id, completed} :
                todo);
    setTodos(newTodo);
    setEditTodo("");
};

useEffect(() => {
    if(editTodo) {
        ...
        setDueDate(editTodo.dueDate);
    } else {
        setDueDate(new Date());
    }

}, [setDueDate, editTodo]);

...
...

const onDueDateChange = (date) => {
    setDueDate(moment(date).toDate());
  }

const onFormSubmit = (event) => {
    event.preventDefault();
    if(!editTodo) {
        setTodos([...todos, {id: uuidv4(), 
                      dueDate: JSON.parse(JSON.stringify(dueDate)),  <<<<<<<<<conversion 
                    completed: false}]);
        ...
        setDueDate(new Date());
    } else {
        updateTodo(dueDate, editTodo.id, editTodo.completed);
    }

}      
    return (
    <form onSubmit={onFormSubmit}>
        ...
        ...
        <DatePicker
            className="datePicker"
            selected={dueDate}
            onChange={onDueDateChange}
            name="dueDate"
            dateFormat="yyyy-MM-dd"
          />              
         ...
         ...
    </form>
    );
};

export default Form;

ToDoList 组件：这会在表格上呈现输入

const TodosList = ({
    todos,
    setTodos, 
    setEditTodo
}) => {
    ...     
    const handleEdit = ({id}) => {
        const findTodo = todos.find((todo) => todo.id === id);
        setEditTodo(findTodo);
    }
    ...
      const editBtn = (cell, row, rowIndex) => {
        return (
            <button className="button-edit task-button" 
            onClick={() => handleEdit(row)}>
            <i className="fa fa-edit"></i>
        </button>
        );
      };

      ...
      const formatDate = (cell, row) => {
        return moment(row.dueDate).format("yyyy-MM-DD");
          
      }

    const columns = [
        { dataField: 'dueDate', text: 'Due Date', formatter:formatDate },
        { dataField: '', text: 'Edit',  formatter: editBtn },
      ];
  
    return (
        <div>
            ...
                <BootstrapTable 
                    bootstrap4
                    keyField='id' 
                    data={todos} 
                    columns={columns}
                />
              ...           
    </div>
    );
};

export default TodosList;

在转换之前DatePicker 捕获日期为Mon Aug 09 2021 08:45:30 GMT+0200 (Central European Summer Time) 格式。我尝试编辑的日期被捕获为2021-08-19T21:34:24.000Z。我认为这就是问题所在。

尝试过，因为DatePicker 只接受Date 作为输入。我尝试使用moment(dueDate).toDate() 重新转换它，但这似乎不起作用，因为无法在Form 组件中找到再次需要重新转换的确切位置。

【问题讨论】：

标签： reactjs datepicker react-bootstrap-table react-datepicker

【解决方案1】：

找到应用解决方案的地点：

在更新状态时，需要进行重新转换。重新转换是将日期再次转换为Date格式。

useEffect(() => {
if(editTodo) {
    setDueDate(moment(editTodo.dueDate).toDate()); <<<<<<<< this is the solution
} else {
    setDueDate(new Date());
}

}, [setTitle, setDescription, setDueDate, editTodo]);

【讨论】：