React更新状态值表单子级未达到父级组件

Question

在我的父组件中，我给该子组件分配了一个时隙数组，在该组件中，我显示了这些时隙，当单击某个时隙时，应该将该值返回给父组件。

但是出了点问题。当我记录所有内容时。单击的值会记录日志，但应传递给父级的相同值不会记录

日志

我还注意到父日志（不显示值的日志）排在第一位。但是它不应该先记录这个

子组件

class ShowAvailableTimeslots extends Component {
    constructor(props) {
        super(props);
        this.state = {
            size : 5,
            selectedSlotValue:"",
        }
        this.handleTimeSlotClick = this.handleTimeSlotClick.bind(this);
    }

    handleTimeSlotClick(timeslot){
        this.setState({
            selectedSlotValue: timeslot
        })
        this.props.onClick(this.state.selectedSlotValue)
        console.log('time slot value', timeslot)
    
    }
    render() {
       var timeSlotArr =  this.props.timeSlots.slice(0,this.state.size);
        return (
            <React.Fragment>


                {
                    timeSlotArr.map(timeSlot => <a className="timeslot btn "key={timeSlot} onClick={() => {this.handleTimeSlotClick(timeSlot)}}>{timeSlot}</a>)

                }

            </React.Fragment>
        )
    }
}

export default ShowAvailableTimeslots

父组件

class UpdateAppointment extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(),
            selectedService: "",
            selectedClient: "",
            start: "",
            end: "",
            clientId: "",
            serviceId: "",

            id: this.props.calendar.id,
            selectedDate: this.props.calendar.start,

            updateAppointmentStart: "",
            updateAppointmentEnd: "",
            updateStartDate: "",
            updateDate: "",

            buttonIsDisabled: true,
            appointmentHasOverlap: false,
            updatedView: false,
            newServiceSelected: false,
           

            AvailabletimeSlots:[],
        };
        this.openDeleteAppointment = this.openDeleteAppointment.bind(this);
        this.handleDateSelect = this.handleDateSelect.bind(this);
        this.handleServiceSelect = this.handleServiceSelect.bind(this);
    };
    handleDateSelect(date) {
        this.setState({
            selectedDate: Moment(date),
        })  
    }
    handleServiceSelect = (selectedServiceObj, buttonState, timeSlots) => {

        this.setState({
            newServiceSelected: true,
            AvailabletimeSlots: timeSlots,

        });
        console.log("available timeslots: " , timeSlots)
        if (buttonState) {
            this.setState({
                buttonIsDisabled: buttonState,
                appointmentHasOverlap: buttonState,
            });

        } else {

            this.setState({
                selectedService: selectedServiceObj,
                serviceId: selectedServiceObj.id,
                start: this.props.calendar.start,
                end: this.props.calendar.start.clone().add(selectedServiceObj.hours, 'hours').add(selectedServiceObj.minutes, 'minutes'),
                buttonIsDisabled: buttonState,
                appointmentHasOverlap: buttonState,
                newServiceSelected: true,

            });
        }

    };
    getSelectedTimeslot(selectedSlotValue){
        console.log("seletedStorValue", selectedSlotValue)
        // console.log("selectedDate", this.state.selectedDate)
        // this.setState({
        //     // updateAppointmentStart: Moment(`${this.state.selectedDate} ${selectedSlotValue}`, 'YYYY-MM-DD HH:mm')
        // })
    }

    handleClientSelect = (selectedClientObj) => {

        this.setState({ selectedClient: selectedClientObj, clientId: selectedClientObj.id });
    };


    render() {

        return (
            <React.Fragment>
                <div className="customModal">
                    <div className="modal-container">

                        <div className="update">
                            <div className="update-time">
                                <label>Selected date: </label>
                                <p>{this.state.selectedDate.format('dddd, MMMM Do YYYY')}</p>
                                <DatePicker
                                    selected={this.state.selectedDate.toDate()}
                                    onChange={this.handleDateSelect}
                                    inline
                                />
                               
                            </div>
                            <div className="update-service-client">
                                <ServiceSearch onChange={this.handleServiceSelect} serviceId={this.state.viewServiceId} start={this.state.selectedDate}  searchGoal='update'/>
                                <div>
                                {this.state.newServiceSelected ? <ShowAvailableTimeslots onClick={this.getSelectedTimeslot} timeSlots={this.state.AvailabletimeSlots}/>  : ''}
                                </div>
                                <ClientSearch onChange={this.handleClientSelect} clientId={this.state.viewClientId} />
                            </div>
                        </div>

                    </div>
                   
            </React.Fragment>
        )
    }
}

export default UpdateAppointment