警告：現有的狀態轉換

我有一個複雜的應用程序時無法更新，這讓我以下警告：警告：現有的狀態轉換

警告：的setState（...）：現有的狀態轉變（如在無法更新在render或另一個組件的構造函數中）。渲染方法應該是道具和狀態的純粹功能;構造函數的副作用是反模式，但可以移動到componentWillMount。

換句話說，當我按下「添加」按鈕時，會發生此警告，應該將另一個組件添加到我的應用程序中。這裏是一個相應的一段代碼：

<Button onClick={addChartHandler.bind(this)}><Glyphicon glyph="plus" /></Button>

addChartHandler來自它的容器組件：

addChartHandler() { 
    store.dispatch(addChart()); 
}

addChart簡單地增加組件計數器。和應用程序容器訂閱這些變化：

const mapStateToProps = (store) => { 
    return { 
     count: store.app.chartsCount 
    }; 
}

這是我很難追查的警告，但我每次每一個部件呈現時稱爲console.log。看來，這個警告渲染此組件（這是愚蠢的成分爲我App）後彈出：

render() { 
    let charts = []; 

    for (let i = 0; i < this.props.count; i++) { 
     charts.push(<ChartContainer id={i} key={i} size={this.props.size} />); 
    } 
    console.log('APP RENDER'); 
    console.log(charts); 
    return (
     <div className="container-padding"> 
      <NavContainer /> 
      {charts} 
     </div> 
    ); 
}

任何建議都歡迎。在這方面至少工作了三個小時，跑出了想法。

來源

2016-12-13 Oscar

ChartContainer在做什麼？ – Christian

@Christian獲取繪製圖表所需的數據（使用chart.js） – Oscar

這是因爲代碼的代碼，使我覺得這個問題行： -

for (let i = 0; i < this.props.count; i++) { 
     charts.push(<ChartContainer id={i} key={i} size={this.props.size} />); 
    }

我認爲你正在做setState某處呈現或你的狀態更新它不應該這樣做。你可以分享一次ChartContainer組件嗎？

你可以試試這個嗎？

constructor(){ 
    state : { 
    charts : [] 
    } 
} 

componentWillReceiveProps(nextProps){ 
    if(nextProps.count != this.props.count){ 
    let charts = [] 
    for (let i = 0; i < this.props.count; i++) { 
     charts.push(<ChartContainer id={i} key={i} size={this.props.size}  />); 
    } 
    this.setState({charts:charts}) 
    } 
} 

render() { 
    return (
     <div className="container-padding"> 
      <NavContainer /> 
      {this.state.charts} 
     </div> 
    ); 
}

來源

2016-12-13 14:10:46

感謝所有的答案，我解決了這個問題：我在一些其他組件的調用constructor()setState。對於那些要麼：仔細檢查所有其他組件，以及他們的render()和constructor()方法。

來源

2016-12-14 04:36:52 Oscar

此解決方案幫助我清除自己的想法。

我正面臨着這個錯誤，因爲我在構造函數中自己添加了this.setState({});。

所以我把它搬到componentWillReceiveProps它工作！

謝謝@Harkirat Saluja

來源

2017-06-27 13:08:47 Tejashree

警告：現有的狀態轉換

回答

相關問題