React周日历仅在触摸时更新视图，而不是在接收新数据时更新

问题描述

我正在尝试制作一个日历，您可以在其中查看不同员工的日历及其安排的约会。

当我从BE获得数据时，我选择第一位员工并默认显示他们的约会。 但是，用户可以选择一个雇员来查看他们的日程安排，并且周历应该显示它。 从理论上讲，它可以工作，但是日历本身存在问题。我使用react-week-calendar，它只在我触摸日历或使用日历上的滚动条时才更改日历的视图。当我记录数据时，它接收到的是正确的数据，但我只是不知道为什么它只会在我触摸日历视图时更改它吗？

下面提供的代码。

export default class PublicCalendar extends React.Component {
  organisation;
  startEmployee=[];
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id,showCalendarDay: moment(),clickedEmployeeAppointments:[],};

    //  this.onEmployeeClick = this.onEmployeeClick.bind(this);
  };
  onEmployeeClick=(selectedEmployee)=>{
    let appointments=[]
    selectedEmployee.appointments.map(appointment => appointments.push({
      start: moment(appointment.start),end: moment(appointment.end)
    }))
    if(appointments.length !=0 )
    {
    this.startEmployee.splice(0,this.startEmployee.length,...appointments);
    console.log("start",this.startEmployee)
    }
   
  }


  render() {
    const { id } = this.state;
    const GET_ORGANIZATION = gql`
    query getOrganization($id: ID!) {
      getOrganization(id:$id){
              id
              name
              street
              addings
              zipCode
              country 
              houseNumber        
              employees{
                id
                firstname
                lastname
                appointments{
                  id
                  start
                  end
                }
              }
      }
    }
  `;
    return (

      <div  id="public">
        <Query query={GET_ORGANIZATION} variables={{ id }} >
          {({ loading,error,data }) => {
            if (loading) return <span class="sr-only">Loading...</span>
            if (error) return <div>Error</div>
            if (data) {
              this.organisation = data.getOrganization;
              if(this.state.clickedEmployeeAppointments.length===0){
              this.organisation.employees[0].appointments.map(appointment => this.startEmployee.push({
                start: moment(appointment.start),end: moment(appointment.end)
              }));
            }
              
              
              }
              console.log("starts",this.startEmployee)
              return (
                <React.Fragment>
        
                  <div id="public-header">
                    <div id="public-appoint-logo">
                      <p>logo</p>
                    </div>
                    <div id="public-company-info">
                      <p>{this.organisation.name}</p>
                    </div>
                  </div>
                  <div id="public-body">
                  <div id="employees">
                    {this.organisation.employees.map(employee =>   <button value={employee} key={employee.id} onClick={(e)=>this.onEmployeeClick(employee)}>{`${employee.firstname} ${employee.lastname}`}</button>  )} 
                      </div>
                    <div id="day-switches">
                      <p>day switches</p>
                    </div>

                    <div id="public-calendar">
                      <WeekCalendar
                        firstDay={this.state.showCalendarDay}
                        startTime={moment({ h: 8,m: 0 })}
                        endTime={moment({ h: 21,m: 0 })}
                        scaleUnit={30}
                        cellHeight={80}
                        numberOfDays={7}
                        modalComponent={CalenderModal}
                        eventSpacing={20}
                        // selectedIntervals={this.state.selectedEmployee.appointments}
                        selectedIntervals={this.startEmployee}
                        eventComponent={CustomEvent}
                        scaleHeaderTitle={this.state.showCalendarDay.format('MMMM')}
                        headerCellComponent={CustomHeaderCell}
                      />
                    </div>
                  </div>
                </React.Fragment>
              )
            }
          }

        </Query>
        </div>
    )

  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）