在React的render方法中调用setState()引发报错的问题求助

Hey there, let's break down what's causing those errors and fix them properly:

为什么会出现这些问题？ #

1. 在render中调用setState是大忌
   Render方法应该是纯函数——它只根据当前的props和state返回JSX，不应该有任何副作用（比如修改状态）。当你在render里调用this.resetMsg()（里面包含setState），setState会触发组件重新渲染，然后又会进入render再次调用resetMsg()，形成无限循环，最终导致Maximum call stack size exceeded。

2. 直接修改state对象是错误的
   你的代码里直接修改了this.state.company的属性：

   const company = this.state.company;
   company.id = 0;
   company.messages = [];
   

   React依赖状态的不可变性来检测变化，直接修改原state对象属于mutate操作，React可能无法正确识别状态变化，还会导致不可预测的组件行为。

修复方案 #

1. 用生命周期方法替代render内的状态更新 #

我们需要在组件更新完成后，检测resetMessages的props变化，再执行重置操作。使用componentDidUpdate生命周期方法：

componentDidUpdate(prevProps) {
  // 只有当resetMessages从false变为true时才执行重置
  if (this.props.resetMessages && !prevProps.resetMessages) {
    this.resetMsg();
  }
}

2. 正确地不可变更新state #

修改resetMsg方法，创建新的company对象，而不是直接修改原state：

resetMsg = () => {
  this.setState(prevState => ({
    company: {
      // 复制原company的其他属性
      ...prevState.company,
      // 重置需要修改的属性
      id: 0,
      messages: []
    }
  }));
  
  // 关键：通知Redux将resetMessages设为false，避免重复触发
  this.props.setResetMessages(false);
};

3. 移除render内的条件判断 #

把原来render里的这段代码删掉：

if(this.props.resetMessages){
  this.resetMsg();
}

为什么这样有效？ #

• componentDidUpdate在组件更新完成后执行，此时调用setState不会打断当前的渲染流程，避免了Cannot update during an existing state transition警告。
• 通过对比prevProps和当前props，我们只在resetMessages从false变为true时执行一次重置，彻底避免了无限循环。
• 不可变更新state（创建新对象）确保React能正确检测到状态变化，组件会按预期重新渲染。

内容的提问来源于stack exchange，提问作者user8125765