Question

我看到它已被问到，但它对我的问题没有帮助。我正在使用componentDidUpdate方法来更新我的状态。我正在执行5个补丁调用，5个调用来更新我的数据。当我检查我的网络时，它显示所有数据呼叫都正确执行，除了一次执行3次，第一次2次，301状态，最后一次200，现在我不知道为什么我收到此错误

  componentDidMount() {
    this.props.overallMixData.map(data => {
      let filtereddata = this.props.VolumeGraph.filter(
        dataWorld => dataWorld.world_name === data.world_name
      );
      data.world_volume = filtereddata[0].world_volume;
    });
    this.setState({ minMaxgraphData: this.props.overallData });
  }
  componentDidUpdate(prevProps, prevState) {
    let newoverallData = prevProps.overallMixData;
    let Graph = prevProps.VolumeGraph;

    const newOverallData =overallData.map(data =>{
    let GraphData= Graph.filter(worldData => worldData.name === data.name);
      data.world_volume=worldGraphData[0].world_volume;
    })

      this.setState({ minMaxgraphData: newoverallData });

  }

这是我执行调用的传奇

 try {
    const updateMixData = yield worldMixData.map(data => {
      return call(updateWorldMixDetail, data);
    });

    yield [put({ type: types.UPDATE_MIX_VALUES, updateWorldMixData })];
    const updateDetails = yield call(fetchData);
    const updateMixDetails = yield call(worldMixDetail);
     yield [put({ type: types.COM_DATAS, companyData:updateDetails })];
    yield [
      put({
        type: types.MIX_DETAILS,
        MixDetails: updateMixData 
      })
    ];

    const year = Math.max.apply(
      Math,
      updateMixDetails.map(function(data) {
        return data.year;
      })
    );
    const chnAggregData = yield call(channelAggregation, year);
    const volAggregateData = yield call(volAggregation, year);
    const MixAgg = yield call(MixAggregation, year);
    yield [
      put({
        type: types.FETCH_CHN_AGGREGATEDS,
        channelAggregationData: chnAggregData
      })
    ];
    yield [
      put({
        type: types.FETCH_VOL_AGGREGATEDS,
        volAggregationData: volAggregateData
      })
    ];
    yield [
      put({
        type: types.FETCH_MIX_AGGREGATEDS,
        MixAggregationData: MixAgg
      })
    ];
  } catch (error) {
    yield put({
      type: 'FETCH_MIX_UPDATE_ERROR',
      error
    });
  }

这是我的控制台

 RangeError: Maximum call stack size exceeded
    at MinMaxGraph.render (minMaxGraph.js:239)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:745)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:560)
    at Object.performUpdateIfNecessary (ReactReconciler.js:156)
    at runBatchedUpdates (ReactUpdates.js:150)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (

Answer 1

在setState调用中使用componentDidUpdate调用时，您应该非常谨慎，因为这会导致无限循环，因为setState会触发componentDidUpdate。

如果您在收到新道具后需要更新状态，请尝试使用componentWillReceiveProps生命周期方法或确保添加条件逻辑以防止后续更新。

Answer 2

在setState内拨打componentDidUpdate很好。但你应该知道何时更新，何时不知道。 componentDidUpdate(prevProps, prevState)有两个参数。应该使用prevState或prevProps将其与currentState或currentProps进行比较，并在必要时执行您的逻辑。

因此，在您应该进行必要的patch和get调用时找出条件，然后仅在需要时设置状态。在没有任何条件的情况下调用它将导致循环，因为setState再次更新DOM，而后者又调用componentDidUpdate。

所以你的代码可能会变成这样的东西

componentDidUpdate(prevProps, prevState) {

 const isChanged = [true/false]; // calcluate your condition based on props or state];

 // execute only if your condition is satisfied.
 if (isChanged) {
  let newoverallData = prevProps.overallMixData;
  let Graph = prevProps.VolumeGraph;

  const newOverallData =overallData.map(data =>{
  let GraphData= Graph.filter(worldData => worldData.name === data.name);
    data.world_volume=worldGraphData[0].world_volume;
  })

  this.setState({ minMaxgraphData: newoverallData });
 }
}

Answer 3

您在componentDidUpdate中使用setState而不使用中断条件。这就是为什么它进入无限循环。

React中的最大调用堆栈超出错误

3 个答案: