終極版：基於條件

Question

以我反應-Redux的應用，我有以下呈現compoent反應組分：

render(){ 

     return(<div style={this.setStyler()} > 
        {this.props.value} 
      </div>); 
    } 

setStyler()的操縱一個減速器，並返回其應css被應用的值。

的問題是，我面對的錯誤：

Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount. 

看來，終極版不允許我根據狀態條件下呈現組件。但我不知道我該如何解決這個問題？

更新：

setStyler(){ 
    if(this.props.activeWord!=this.props.wordId) 
     return { color:'black', fontWeight: 'normal' }; 
    if(this.props.letterId>this.props.activeLetter && this.props.activeWord==this.props.wordId) 
     return { color:'black', fontWeight: 'normal' }; 

    if(this.props.letterId==this.props.activeLetter && this.props.activeWord==this.props.wordId){ 
      if(this.props.value==this.props.newTypedLetter){ 
       this.props.color({ color:'green', fontWeight: 'bold' }); //change reducer 
       return { color:'green', fontWeight: 'bold' }; 
      } 
      if(this.props.value!=this.props.newTypedLetter){ 
       this.props.color({ color:'red', fontWeight: 'bold' });  ////change reducer 
       return { color:'red', fontWeight: 'bold' }; 
       } 

    } 
    if(this.props.letterId<this.props.activeLetter && this.props.activeWord==this.props.wordId) 
      return this.props.letterColor; 

    } 

Answer 1

我要說的是，在這種情況下，你應該嘗試調用this.setStyler()從constructor和componentWillUpdate。然後，您只需從render函數中讀取來自redux商店的價值。

這應該做的工作，但仍然不是最好的方法國際海事組織，因爲你正在使你的組件fat。您可以嘗試閱讀關於Presentational and Container Components的這篇文章，這將解釋設計您的組件的模式。

問題是，你正試圖修改渲染函數，這是一個side effect。函數式編程範式中的反應試圖遵循，這是一種反模式。正如你所看到的，反應試圖通過你收到的錯誤來確切地告訴你。