Redux: render compoent basierend auf einer Bedingung

Question

In meiner reagieren-redux Anwendung, ich habe die Komponente folgenden reagieren:

render(){ 

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

Die setStyler() ein Reduktions manipulieren und einen Wert zurückgeben, die als css angewandt werden sollen.

Das Problem ist, ich konfrontiert mit dem Fehler:

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. 

Es scheint, dass redux mir nicht erlauben Komponente basiert auf Zustand zu machen. aber ich weiß nicht, wie ich dieses Problem beheben kann?

aktualisieren:

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

würde ich sagen, dass in diesem Fall sollten Sie versuchen, this.setStyler() von constructor und componentWillUpdate aus anrufen. Und dann sollten Sie einfach den Wert von redux speichern von Ihrer render Funktion lesen.

Dies sollte die Arbeit tun, aber immer noch nicht der beste Ansatz IMO, weil Sie Ihre Komponente fat machen. Sie können versuchen, diesen Beitrag über Presentational and Container Components zu lesen, der ein Muster des Entwerfens Ihrer Komponenten erklären wird.

Das Problem ist, dass Sie versuchen, etwas von Render-Funktion zu ändern, die eine side effect ist. Dies im Paradigma der funktionalen Programmierung, dem zu folgen versucht, ist ein Anti-Muster. Und wie Sie sehen können, versucht react Ihnen genau das durch den Fehler zu sagen, den Sie erhalten haben.