React中的最大調用堆棧超出錯誤

我看到它已經被問到，但它對我的問題沒有幫助。我正在使用componentDidUpdate方法來更新我的狀態。我正在執行5個補丁程序調用，5獲得調用來更新我的數據。當我檢查我的網絡時，顯示所有的數據調用都正常執行，除了一次執行3次第一次2次301狀態和最後200次的調用，現在我不知道爲什麼我得到這個錯誤React中的最大調用堆棧超出錯誤

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 (

來源

2017-09-04 LowCool

我不知道，但調用'this.setState（{minMaxgraphData：newoverallData}）;''裏面會componentDidUpdate'概率導致它被稱爲再次，你會在這裏得到遞歸。 –

您需要閱讀有關反應原生命週期的內容。 view再次呈現時調度'componentDidUpdate'，並在執行'setState'時導致渲染。你明白你造成的無限循環嗎？ – jose920405

打電話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 }); 
} 
}

來源

2017-09-04 12:57:32 Panther

使用0123內setState電話時，應十分謹慎調用，因爲這會導致無限循環，因爲setState會觸發componentDidUpdate。

如果您在收到新道具後需要更新狀態，請嘗試使用componentWillReceiveProps生命週期方法，或確保添加條件邏輯以防止後續更新。

來源

2017-09-04 12:50:36 Fotis

您正在使用componentDidUpdate內的setState而不使用中斷條件。這就是爲什麼它在無限循環。

來源

2017-09-04 12:52:47 rEjITh

React中的最大調用堆棧超出錯誤

回答

相關問題