React TimeRange未读取默认值

Question

我有一个组件EventDetails，它将道具传递给组件EventEdit。 EventEdit组件是一种表单，应读取事件的当前值并将其显示为默认值，然后允许用户对其进行编辑。事件具有开始时间和结束时间状态。但是，TimeRange字段未获取这些时间，只是默认为8:30和10:00，而是获取了所有其他值填充在其输入字段中。我只添加了TimeRange字段，以使代码段简短

EventDetails.js：

class EventDetails extends Component {

  constructor() {
    super();
    this.state= {
      event: {},
      attendance: 0
    }
  }

<div className="editEvent">
   <EventEdit event={this.state.event} />
</div>

EventEdit.js：

class EventEdit extends Component {

  constructor(props) {
    super(props)

    this.state = {
      name: this.props.event.name,
      location: this.props.event.location,
      date: this.props.event.date,
      start_time: moment(this.props.event.start_time, 'hh:mm a'),
      end_time: moment(this.props.event.end_time, 'hh:mm a')
    }

  }

    handleSubmit(e) {

      fetch(`http://localhost:3000/events/${this.props.event.id}`, {
        method: 'PUT',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state)
      })
      .then((response) => response.json())
      .then(events => {
        this.showDetailsPage();
      })
      .catch((err) => {
        console.error(err)
      })
      console.log(this.state, "THE STATE")
    }


    handleDate(date){
      this.setState({
          date: date
      });
  }

    handleChange(e) {
      this.setState({
        ...this.state,
        [e.currentTarget.name]: e.currentTarget.value,
      })
    }

    handleStartTime(time){
      this.setState({
        start_time: time.startTime
      });

    }

    //Handle changes to end time picker
    handleEndTime(time) {
        this.setState({
          end_time: time.endTime
        });
    }

  render() {
    console.log(this.props, "Props")
    return (
      <div>
        <h1>Edit Event</h1>

        <form onSubmit={this.handleSubmit}>

          <TimeRange
            startMoment={this.state.start_time}
            endMoment={this.state.end_time}
            sameIsValid={false}
            onStartTimeChange={this.handleStartTime}
            onEndTimeChange={this.handleEndTime}
          />
      </div>
    )
  }
}

export default EventEdit