Question

我正在尝试将状态中的moment对象格式化为字符串，然后以不可变的方式发送到数据库，以免改变状态。

        this.state = {
            startDate: moment()
        }

状态需要是React DatePicker的Object。所以在提交我的表单时，我想将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')

在React State中格式化的时刻是无法形容的

2 个答案: