Reactjs 警告：setState（…）：无法在现有状态转换期间更新（例如在“render”或其他组件的构造函数中）

在我的react redux应用程序中，我试图基于一些属性将一组样式应用于组件。但当我加载应用程序时，它会抱怨：

Warning: setState(...): 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`.

下面是根减速器：

import letterColor from './LetterColorReducer';

const root_reducer=combineReducers({
    letterColor:letterColor
});


export default root_reducer;

下面是

LetterColorReducer

文件中的reducer函数：

export default function LetterColor(state={ color:'black', fontWeight: 'normal', fontWeight: 900 },action){

  switch(action.type){
  case 'Corrected_Typed':
    return { color:'green', fontWeight: 'normal', fontWeight: 900 };
  case 'Not_Corrected_Typed':
    return { color:'red',fontWeight: 'normal', fontWeight: 900 };
  case 'Active':
    return { color:'black', fontWeight: 'bold', fontWeight: 900 };
  default:
    return { color:'black', fontWeight: 'normal', fontWeight: 900 };
}
}

我注意到，错误来自开关部分。 但我不知道怎么了

更新：

组件代码为：

export default class Letter extends Component{

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

}

以下是集装箱代码：

function mapStateToProps(state){
  return {newTypedLetter:state.newTypedLetter, letterColor:state.letterColor}
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({Styler},dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(Letter);

---

首先，你的减速器是错的

reducer会传递应用程序处理的所有操作，包括reducer与之无关的操作

此外，无论减速器返回什么，都将是从那时起的状态。请注意，将reducer看作是更改应用程序当前状态的一种方法，而不是返回值供您使用的实用函数

当你说

这只是一个简单的动作，要求减速机提供合适的样式

在我看来，您认为调度一个操作只是调用reducer并返回reducer返回的值

两者都不是真的。减速机返回的值不会通过调用

Styler（）

返回。reducer返回的值是reducer管理的全局应用程序状态切片的新状态

如果您的reducer返回一个新对象，即使在未知操作出现时（就像reducer一样），那么它将导致许多大问题

首先，每次在应用程序中的任何位置调度任何操作时，您的样式都将恢复为默认样式

第二，由于每次都返回一个新的对象，因此任何连接到该部分状态的

connect

ed都将重新提交。同样，这发生在任何动作上，即使是不相关的动作

继续

从您的代码和注释来看，似乎您正试图将reducer作为一个简单的函数来使用，该函数决定如何设置组件的样式

不要为此使用减速器。使用一个简单的函数：

function letterColor(state){
  switch(state){
    case 'CORRECTED_TYPED':
      return { color:'green', fontWeight: 'normal' };
    case 'NOT_CORRECTED_TYPED':
      return { color:'red', fontWeight: 'normal' };
    case 'ACTIVE':
      return { color:'black', fontWeight: 'bold' };
    default:
      return { color:'black', fontWeight: 'normal' };
  }
}

上述功能不是减速器。您可以这样使用它：

export default class Letter extends Component{
  render(){
    return(<div style={letterColor('CORRECTED_TYPED')}>
                {this.props.value}
          </div>);
  }
}

导出默认类字母扩展组件{
render（）{
返回(
{this.props.value}
);
}
}

我使用了通常的大写形式，即：

• 正常功能从小写字母开始，使用大写字母
• 构造函数以大写字母和用例开头
• 常量和常量字符串完全为大写，并使用下划线

Redux旨在管理状态。状态是应用程序中的当前状态

随着时间的推移，状态会发生变化。在Redux中，只有在调度操作时才会发生这种情况

找出渲染内容的样式不会改变应用程序的状态。因此，它不应采取行动

如果减速器不知道如何处理操作，它应该始终返回调用它时的状态

如果减速器未更改状态中对象的属性，则它应始终返回相同的对象。如果减速器未更改状态子对象的属性，则它应始终将原始子对象作为新状态的一部分返回

---

状态是指应用程序中的当前情况。它不应该包含任何您可以通过其他方式找到的数据，例如，基于该州其他数据的计算。这种数据称为“派生数据”。确定存储哪些数据和派生哪些数据的过程称为

首先，您的减速器是错误的

reducer会传递应用程序处理的所有操作，包括reducer与之无关的操作

此外，无论减速器返回什么，都将是从那时起的状态。请注意，将reducer看作是更改应用程序当前状态的一种方法，而不是返回值供您使用的实用函数

当你说

这只是一个简单的动作，要求减速机提供合适的样式

在我看来，您认为调度一个操作只是调用reducer并返回reducer返回的值

两者都不是真的。减速机返回的值不会通过调用

Styler（）

返回。reducer返回的值是reducer管理的全局应用程序状态切片的新状态

如果您的reducer返回一个新对象，即使在未知操作出现时（就像reducer一样），那么它将导致许多大问题

首先，每次在应用程序中的任何位置调度任何操作时，您的样式都将恢复为默认样式

第二，由于每次都返回一个新的对象，因此任何连接到该部分状态的

connect

ed都将重新提交。同样，这发生在任何动作上，即使是不相关的动作

继续

从您的代码和注释来看，似乎您正试图将reducer作为一个简单的函数来使用，该函数决定如何设置组件的样式

不要为此使用减速器。使用一个简单的函数：

function letterColor(state){
  switch(state){
    case 'CORRECTED_TYPED':
      return { color:'green', fontWeight: 'normal' };
    case 'NOT_CORRECTED_TYPED':
      return { color:'red', fontWeight: 'normal' };
    case 'ACTIVE':
      return { color:'black', fontWeight: 'bold' };
    default:
      return { color:'black', fontWeight: 'normal' };
  }
}

上述功能不是减速器。您可以这样使用它：

export default class Letter extends Component{
  render(){
    return(<div style={letterColor('CORRECTED_TYPED')}>
                {this.props.value}
          </div>);
  }
}

导出默认类字母扩展组件{
render（）{
返回(
{this.props.value}
);
}
}

我使用了通常的大写形式，即：

• 正常功能从小写字母开始，使用大写字母
• 构造函数以大写字母和用例开头
• 常量和常量字符串完全为大写，并使用下划线

Redux旨在管理状态。状态是应用程序中的当前状态

随着时间的推移，状态会发生变化。在Redux中，只有在调度操作时才会发生这种情况

找出在doe中渲染某物的样式