Uncaught RangeError: неверное значение времени в реакции-DatePicker

avatar
PineCone
9 августа 2021 в 06:54
676
1
0

У меня есть компонент 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.

Источник

Ответы (1)

avatar
PineCone
9 августа 2021 в 07:37
0

Выявлено место для нанесения раствора:

Пока состояние обновляется, именно здесь должно произойти повторное преобразование. Реконверсия заключается в повторном преобразовании даты в формат Date.

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

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