将Datepicker输入保存到状态会导致错误

Question

我在我的React应用程序中使用datepicker，以允许用户选择一个要保存的日期。

我在控制台中收到此警告：

backend.js：6弃用警告：提供的值不是公认的RFC2822或ISO格式。 此刻的构建工作归结于js Date（），它在所有浏览器和版本之间都不可靠。 不建议使用非RFC2822 / ISO日期格式，并将在即将发布的主要版本中将其删除。 请参阅http://momentjs.com/guides/#/warnings/js-date/了解更多信息。

我的代码在这里：

    <div required>
                <DatePicker
                    timeIntervals={15}
                    selected={this.state.userEvent.startDetails}
                    onChange={event =>
                    this.changeField(event, "startDetails")
                    }
                    onBlur={(event) => {this.errorIfSecondTimeIsNotBeforeFirstTime(moment(event.target.value), moment(), 'startDateInPast'); this.setDefaultstopSellingTime(event.target.value)}}
                    showTimeSelect
                    dateFormat="Pp"
                    required
                    placeholderText='Date & Time Event Starts'
                />
                </div>

导致问题的代码行在这里：

selected={this.state.userEvent.startDetails}

（当我删除此行时，我正在调用的函数不会导致错误）

这是我要更改状态的函数：

  changeField = (e, field) => {
    let userEvent = this.state.userEvent;

        if (field === "startDetails" || field === "endDetails") {
        userEvent[field] = e
    } else {
      userEvent[field] = e.target.value;
    }
    this.setState({ userEvent })
  }

我了解使用e将日期存储在状态为Sat Nov 30 2019 16:30:00 GMT+0000 (Greenwich Mean Time) ，这会导致错误。

但是，如果我将函数更改为使用moment（e）：

  changeField = (e, field) => {
    let userEvent = this.state.userEvent;

        if (field === "startDetails" || field === "endDetails") {
        userEvent[field] = moment(e)
    } else {
      userEvent[field] = e.target.value;
    }
    this.setState({ userEvent })
  }

应用程序崩溃，出现以下错误：

未捕获的RangeError：无效的时间值

我应该怎么做才能解决这个错误

Answer 1

瞬间date另存为object但在React中您无法直接渲染对象。 您可以在渲染日期时或设置为state之前格式化日期。 在此处阅读有关时刻日期格式的更多信息。

在您的DatePicker ：

<div required>
    <DatePicker
        timeIntervals={15}
        selected={moment(this.state.userEvent.startDetails).format('YYYY-MM-DD')}
        onChange={event =>
        this.changeField(event, "startDetails")
        }
        onBlur={(event) => {this.errorIfSecondTimeIsNotBeforeFirstTime(moment(event.target.value), moment(), 'startDateInPast'); this.setDefaultstopSellingTime(event.target.value)}}
        showTimeSelect
        dateFormat="Pp"
        required
        placeholderText='Date & Time Event Starts'
    />
</div>

或在ChangeField处理程序中

changeField = (e, field) => {
    let userEvent = this.state.userEvent;

    if (field === "startDetails" || field === "endDetails") {
        userEvent[field] = moment(e).format('YYYY-MM-DD')
    } else {
        userEvent[field] = e.target.value;
    }
    this.setState({ userEvent })
}