如何使用MomentJS将自定义日期设置为react-datepicker的DatePicker？

我已将日期存储在数据库中。我可以成功获取日期。但是当涉及到将任何特定日期设置为 DatePicker 时反应日期选择器 https://www.npmjs.com/package/react-datepicker，我无法设定那个日期。

这是我用来获取日期并使用日期值设置状态的代码。

loadAllEvents() {
    axios({
        method: 'POST',
        url: '/api/Account/SelectAllDatesFromDb',
        contentType: 'application/json',
        data: {},
    }).then(function (response) {
        if(response!=null){     
            this.setState({
                eventList: response.data
            });
            this.updateAllDates();
        }
        else {
            this.setState({
                eventList: []
            });
        }

    }.bind(this))
        .catch(function (error) {
            console.log(error);
        });
}

UpdateAllDates() 函数用于使用以下命令转换日期MomentJs https://momentjs.com

updateAllDates() {
        for (var i = 0; i < this.state.eventList.length; i++) {
            var items = this.state.eventList;
            items[i].event_date = moment(this.state.eventList[i].event_date).format("DD/MM/YYYY");
            this.setState({ eventList: items });    
        }
    }

获取日期后，现在我尝试将日期设置为日期选择器并尝试设置selected范围。这是代码：

<InputGroup>
  <DatePicker
    className="form-control"
    dateFormat="dd/MM/yyyy"
    maxDate={new Date()}
    isClearable={true}
    selected={this.state.eventList[0].event_date}
    onChange={this.handleChange}
    disabled={this.state.eventDateBox}
    showYearDropdown
    showMonthDropdown
  />

When I runs code I get error - TypeError: Cannot read property 'event_date' of undefined:

我哪里出错了？是否有其他方法可以使用默认/自定义日期将日期设置为 DateTimePicker？

updateAllDates只有在API调用成功后才会被调用。所以当页面呈现你的this.state.eventList[0]将是未定义的。

所以进行如下检查

{ this.state.eventList[0] &&
<InputGroup>
  <DatePicker
    className="form-control"
    dateFormat="dd/MM/yyyy"
    maxDate={new Date()}
    isClearable={true}
    selected={this.state.eventList[0].event_date}
    onChange={this.handleChange}
    disabled={this.state.eventDateBox}
    showYearDropdown
    showMonthDropdown
  />
}