将 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 })
  }

应用程序崩溃，我收到以下错误：

Uncaught RangeError: Invalid time value

我应该怎么做才能修复这个错误

Answer 1

Moment date 被保存为 object 但在 React 中你不能直接渲染对象。您可以在渲染时或在state 中设置之前格式化日期。阅读有关时刻日期格式的更多信息here。

在你的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 })
}