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

4

1 回答 1

0

跟踪现场应用解决方案：

当状态更新时，这就是需要进行重新转换的地方。重新转换是将日期Date再次转换为格式。

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

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

于 2021-08-09T07:37:36.057 回答