Формат момента в React State неотразим

Question

Я пытаюсь отформатировать объект момента в моем состоянии в строку перед неизменной отправкой в ​​базу данных, чтобы не изменять состояние.

        this.state = {
            startDate: moment()
        }

Состояние должно быть объектом для React DatePicker. Поэтому при отправке моей формы я хочу изменить startDate на строку.

        handleSubmit(event) {
            event.preventDefault();

             const newState = { 
                ...this.state,  
                startDate : { ...this.state.startDate } 
             };

             newState.startDate.format('YYYY-MM-DD');


             this.RegisterEmployeeService.registerEmployee(newState)
             .then((res) => {
                Swal('Registered!');
             })  
        }

Но я получаю сообщение об ошибке при запуске .format () для объекта newState.startDate.

          <DatePicker
                selected={this.state.startDate}
                onChange={this.handleStartDateChange.bind(this)}/>

Ошибка:

      TypeError: newState.startDate.format is not a function

Answer 1

Как предполагает Саурабх Шарма, {...this.state.startDate} вызовет проблемы.

Чтобы получить отформатированную дату в переменную newState, я бы предложил написать функцию handleSubmit следующим образом:

handleSubmit = event => {
    event.preventDefault()

    const formattedDate = this.state.startDate.format('YYYY-MM-DD'),
      newState = {
        ...this.state,
        startDate: formattedDate
      }

     this.RegisterEmployeeService.registerEmployee(newState)
     .then((res) => Swal('Registered!'))
}

Вы также можете просто вставить formattedDate, если вам не нужна другая переменная:

const newState = {
    ...this.state,
    startDate: this.state.startDate.format('YYYY-MM-DD')
}

- РЕДАКТИРОВАТЬ -

Если вы беспокоитесь о непреднамеренном изменении вашего существующего состояния (что легко сделать с помощью Momentjs), вы можете клонировать свое существующее состояние, используя ES6 метод назначения :

const newState = Object.assign({}, ...this.state);

То, что делает вышеизложенное, - это захват пустого объекта и клонирование в него вашего состояния. Делая это, вы можете изменять newState столько, сколько хотите, не касаясь оригинала this.state:

newState.startDate = newState.startDate.format('YYYY-MM-DD')

Answer 2

Ну, я думаю, что это как-то связано с startDate : { ...this.state.startDate }

Измените его на: startDate : this.state.startDate и оно должно работать!

Это должно выглядеть так:

const newState = { 
    ...this.state,  
    startDate: this.state.startDate
};