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

Form 组件：仅提供代码的所需部分

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 组件中需要再次重新转换的具体位置。