Как исправить Превышена максимальная глубина обновления Ошибка в ComponentWillMount?

Question

Я искал эту проблему, но связанные с ней случаи не совпадают с моими.

У меня есть Реагирующая сторона клиента , где я использую реагирующий большой планировщик.В ComponentDidMount мне нужно сделать API axios вызовов и установить состояние с данными ответа.

componentWillMount() {
  let today = moment().format(DATE_FORMAT);
  let schedulerData = new SchedulerData(today, ViewTypes.Week);
  schedulerData.localeMoment.locale('en');

  const token = localStorage.getItem("jwttoken");
  axios.post('http://localhost/Auth/api/validate.php', {
      "jwt": token
    }, {
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      console.log(response.data);
      this.setState({
        vendor: response.data.data
      })
      const vid = response.data.data.VendorID;

      return axios.get('http://localhost/Auth/api/show_all_HR.php?VendorID=' + vid, {
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          console.log(response.data);
          schedulerData.setResources(response.data);
          this.setState({
            AllHR: response.data,
            viewModel: schedulerData
          });
          console.log("I should be rendered at 1st", this.state.AllHR);
          console.log(vid);
        });
    });



  axios.get('http://localhost/Auth/api/show_one_HR_hours.php?VendorID=48', {
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      console.log(response.data);
      schedulerData.setEvents(response.data);
      this.setState({
        AllSlots: response.data,
        viewModel: schedulerData
      });
    });

}

Теперь я получаю эту ошибку при выполнении setState:

Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Теперь Все другие решения предполагают, что проблема возникает, когда мы вызываем функцию в onClick или ставим () после функции.Но у меня нет такой вещи.

Поэтому, пожалуйста, предложите мне, что изменить в моем коде?

РЕДАКТИРОВАТЬ: я рендеринг это так:

render() {
    const {viewModel} = this.state;
    return (
      <div>
         <Row style={ {width: "100%"}}>
            <h3> Schedule Maintenance Service Time Slots</h3>
            <Scheduler schedulerData={viewModel}
               prevClick={this.prevClick}
               nextClick={this.nextClick}
               onSelectDate={this.onSelectDate}
               onViewChange={ this.onViewChange}
               eventItemClick={this.eventClicked}
               viewEventClick={this.ops1}
               viewEventText="Ops 1"
               viewEvent2Text="Ops 2"
               viewEvent2Click={this.ops2}
               updateEventStart={this.updateEventStart}
               updateEventEnd={this.updateEventEnd}
               moveEvent={this.moveEvent}
               newEvent={this.newEvent}
               leftCustomHeader={leftCustomHeader}
               toggleExpandFunc={this.toggleExpandFunc}
           />
        </Row>
     </div>
   );
}

prevClick = (schedulerData) => {
  schedulerData.prev();
  schedulerData.setEvents(this.state.AllSlots);
  this.setState({
    viewModel: schedulerData
  })
}

nextClick = (schedulerData) => {
  schedulerData.next();
  schedulerData.setEvents(this.state.AllSlots);
  this.setState({
    viewModel: schedulerData
  })
}

onViewChange = (schedulerData, view) => {
  schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
  schedulerData.setEvents(this.state.AllSlots);
  console.log("Im changing VIEW");

}