React组件报错：Cannot update during existing state transition 求解决方案

问题根源 #

你当前的报错是因为在render方法里调用了getFunc，而getFunc内部执行了setState。React要求render必须是纯函数——只能根据当前props和state返回JSX，不能在渲染过程中修改组件状态，否则会触发重复渲染循环，导致该报错。

调整方案 #

核心思路是把状态更新逻辑和渲染逻辑彻底分离，不在渲染流程里修改state：

1. 抽离过滤逻辑，独立处理状态更新

先把生成过滤后数组的逻辑单独抽出来，不在渲染时执行状态更新：

class NewComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      obj: [],
      externalObj: [],
    };
  }

  // 单独抽离过滤逻辑
  getFilteredArr = () => {
    // 这里替换成你原本获取arr的逻辑（比如从props或其他数据源）
    const rawArr = /* 原始数据 */;
    return rawArr.filter(a => a.toLowerCase().includes('eg'));
  }

  // 在组件挂载或数据变化时更新state
  componentDidMount() {
    const filteredArr = this.getFilteredArr();
    this.setState({ obj: filteredArr });
  }

  // 如果过滤依赖的原始数据来自props，添加这个生命周期避免遗漏更新
  componentDidUpdate(prevProps) {
    // 对比props是否变化，防止无限循环
    if (prevProps.xxx !== this.props.xxx) {
      const filteredArr = this.getFilteredArr();
      this.setState({ obj: filteredArr });
    }
  }

2. 修改渲染相关方法，仅依赖state

让getFunc只负责根据已有的state生成JSX，不再处理过滤和状态更新：

getFunc = (external) => {
    // 直接使用state中已过滤好的obj
    return this.state.obj.map((Id) => {
      return <Legend key={Id} id={Id} title={Id}/>;
    });
  }

  render() { 
    return this.getFunc(false);
  }
}

特殊场景适配（如果过滤依赖external参数）

如果external是控制过滤规则的参数，需要在参数变化时主动触发状态更新，比如在事件回调或props变化时：

// 比如在外部触发更新时调用（如按钮点击、父组件传参变化）
updateObjByExternal = (external) => {
  const rawArr = /* 原始数据 */;
  let filteredArr = rawArr.filter(a => a.toLowerCase().includes('eg'));
  // 根据external参数调整过滤逻辑
  if (external) {
    filteredArr = filteredArr.filter(/* 额外过滤规则 */);
  }
  this.setState({ obj: filteredArr });
}

// render中只负责渲染
render() { 
  return this.state.obj.map((Id) => {
    return <Legend key={Id} id={Id} title={Id}/>;
  });
}

核心原则 #

永远不要在render、getDerivedStateFromProps这类纯生命周期方法里调用setState，状态更新应该放在事件处理函数、数据加载完成回调、props变化后的判断逻辑中，render只做一件事：根据当前props和state返回JSX。

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