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!');
             })  
        }

但在 newState.startDate 对象上运行“.format()”时出现错误。

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

错误：

      TypeError: newState.startDate.format is not a function

Answer 1

我相信这与startDate : { ...this.state.startDate }有关

将其更改为：startDate : this.state.startDate，它应该可以工作！

应该是这样的：

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

Answer 2

正如 Saurabh Sharma 所说，{...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 assign method 克隆现有状态：

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

上面所做的是获取一个空对象并将您的状态克隆到其中。通过这样做，您可以随意修改newState，而无需触及原始this.state：

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