Question

我已经搜索了此问题，但与此问题相关的案例与我的不同。

我有 React客户端，其中我使用react-big-scheduler。在 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时遇到此错误：

已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 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");

}

如何修复超过最大更新深度的问题，在ComponentWillMount中发生错误？

0 个答案: