Question

在我的react-redux应用程序中，我有以下反应组件：

render(){

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

setStyler()操纵reducer并返回一个应该应用为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.

似乎redux不允许我根据状态条件渲染组件。但我不知道如何解决这个问题呢？

更新：

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 store中的值。

这应该可以完成这项工作，但由于您正在制作组件fat，因此仍然不是IMO的最佳方法。您可以尝试阅读有关Presentational and Container Components的帖子，这将解释设计组件的模式。

问题在于，您正尝试从渲染函数修改某些内容，即side effect。功能编程范式中的这种反应试图遵循，这是一种反模式。正如您所看到的那样，通过您收到的错误，您可以通过尝试来确切地告诉您。

Redux：根据条件渲染组件

1 个答案: