未捕獲的錯誤：當組件在 componentWillUpdate 或 componentDidUpdate 中重復調用 setState 時，可能會發生這種情況

Question

我正在嘗試在componentWillUpdate中設置狀態，但它給了我這樣的錯誤。我不知道為什么。

未捕獲的錯誤：超過最大更新深度。 當組件在 componentWillUpdate 或 componentDidUpdate 中重復調用 setState 時，可能會發生這種情況。 React 限制了嵌套更新的數量以防止無限循環。

這就是我想要做的。

    class DispensingIncidents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeSpan: "",
      year: 2020,
      tabValue: "",
      spanData: [],
      dataType: "",
      durationList: "",
      durationLabel: "",
      dataTo: "",
      dataFrom: "",
      incidencesSection: false,
      overViewSelect: "",
      selectTab: 0,
    };
  }

  componentDidMount() {
    this.props.getFilterData(this.state.year);
    this.props.getDuration(this.state.year);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (
      prevProps.dispensingData.duration !== this.props.dispensingData.duration
    ) {
      this.props.getOverviewData(
        Object.keys(this.props.dispensingData.period)[3],
        this.props.dispensingData.duration.monthly[0].period.to,
        this.props.dispensingData.duration.monthly[0].period.from,
        Object.keys(this.props.dispensingData.type)[0],
        this.props.dispensingData._reference
      );
      this.setState({
        timeSpan: Object.keys(this.props.dispensingData.period)[3],
        dataType: Object.keys(this.props.dispensingData.type)[0],
      });
    }
  }
  componentWillReceiveProps() {    < ---- I was trying this as well but gives same error.
    // console.log("componentWillReceiveProps", nextState);
    // if (this.state.timeSpan === "monthly") {
    //   const monthlyData = this.props.dispensingData.duration["monthly"];
    //   console.log({ monthlyData });
    //   this.setState({ spanData: monthlyData });
    // }
    // if (this.state.timeSpan === "yearly") {
    //   const yearlyData = this.props.dispensingData.duration["yearly"];
    //   this.setState({ spanData: yearlyData });
    // } else if (this.state.timeSpan === "weekly") {
    //   const weeklyData = this.props.dispensingData.duration["weekly"];
    //   this.setState({ spanData: weeklyData });
    // } else if (this.state.timeSpan === "quarterly") {
    //   const quarterlyData = this.props.dispensingData.duration["quarterly"];
    //   this.setState({ spanData: quarterlyData });
    // } else if (this.state.timeSpan === "monthly") {
    //   const monthlyData = this.props.dispensingData.duration["monthly"];
    //   console.log({ monthlyData });
    //   this.setState({ spanData: monthlyData });
    // } else if (this.state.timeSpan === "6 months") {
    //   const halfYearlyData = this.props.dispensingData.duration["half-yearly"];
    //   this.setState({ spanData: halfYearlyData });
    // }
  }
  

  handleTabChange = (event, newValue) => {
    this.setState({
      setTabValue: newValue,
    });
  };

  /**
   * Year change
   * @param {*} event
   */
  handleYearChange = (event) => {
    const v = event.target.value;
    this.setState({
      year: v,
    });

    this.props.getDuration(v);
  };

  handleSpanChange = (event) => {
    const value = event.target.value;

    const reValue = value === "6 months" ? "half-yearly" : value;
    this.setState({
      timeSpan: value,
    });

    this.props.getOverviewData(
      value,
      this.props.duration[reValue][0].period.to,
      this.props.duration[reValue][0].period.from,
      this.props.dataType,
      this.props._reference
    );
    this.setState({
      dataTo: this.props.duration[reValue][0].period.to,
      dataFrom: this.props.duration[reValue][0].period.from,
      incidencesSection: false,
      overViewSelect: "",
    });
  };

  handleSpanTabChange = (data, i) => {
    this.setState({
      selectTab: i,
      dataTo: data.period.to,
      dataFrom: data.period.from,
      durationLabel: data.label,
      overViewSelect: "",
      incidencesSelection: false,
    });
  };
  handleDataTypeChange = (event) => {
    this.setState({
      dataType: event.target.value,
    });
    const { time, dataTo, dataFrom } = this.state;
    this.props.getOverviewData(
      time,
      dataTo,
      dataFrom,
      event.target.value,
      this.props._reference
    );
    this.setState({
      incidencesSection: false,
      overViewSelect: "",
    });
  };

  handleOverViewClick = (data) => {
    this.props.clearAnalysis();
    this.setState({
      overViewSelect: data,
    });
    const value =
      this.state.time === "6 months" ? "half_yearly" : this.state.time;
    const { dataFrom, dataTo, dataType } = this.state;
    this.props.getAnalysis(
      data,
      value,
      dataFrom,
      dataTo,
      dataType,
      1,
      this.props._reference
    );
    this.setState({
      incidencesSelection: true,
    });
  };

 

  render() {
    const {
      tabValue,
      spanData,
      timeSpan,
      year,
      dataType,
      overViewSelect,
      incidencesSection,
    } = this.state;
    const { classes, dispensingData } = this.props;
    const {
      duration,
      period,
      type,
      incidenceAnalysisDataArray,
      _reference,
      overviewDataLoading,
      loading,
      dispensingOverviewData,
      analysisDataLoading,
      incidenceAnalysisData,
    } = dispensingData;
    const { count } = dispensingOverviewData;

    console.log("handleTimeSPan", this.state.spanData);
    return (
      <div className={classes.dispenseRoot}>
        
      </div>
    );
  }
}

我在我的項目中使用 redux 傳奇。

Answer 1

好吧，您更改 state 和組件重新渲染本身。 重新渲染調用componentWillUpdate ，它改變了 state 和組件重新渲染本身。 重新渲染調用componentWillUpdate ，它改變了 state 和組件重新渲染本身。 重新渲染調用componentWillUpdate ，它改變了 state 和組件重新渲染本身。 重新渲染調用componentWillUpdate ，它改變了 state 和組件重新渲染本身。