React运行报Render methods should be a pure function错误如何解决？

你贴出的App组件条件渲染语法本身没有逻辑错误，该报错的核心原因是render执行过程中出现了修改状态、触发重渲染的副作用操作，常见触发场景如下：

• 父组件传递errorMsg时直接执行了带副作用的方法，比如写为errorMsg={getErrorMsg()}，而getErrorMsg内部存在setState修改状态的逻辑
• errorMsg本身是自定义组件实例，该组件的render方法内存在同步更新状态、修改上下文/全局变量的操作，导致嵌套组件在父组件render阶段触发更新
• showError的取值在App组件单次render周期中被修改，导致条件判断结果不稳定

按以下优先级排查调整即可解决：

1. 校验props传递逻辑：确保showError、errorMsg都是无副作用的纯值，如果errorMsg需要动态生成，不要在传参时直接执行生成函数，可改为在父组件的componentDidMount/useMemo中预计算好值再传递
2. 调整条件渲染写法避免边界异常，React 18+版本下可以把逻辑与&&写法替换为更稳定的三元表达式：

class App extends React.Component{
     render(){
         const{showError, errorMsg} = this.props;
         return(
             <div>
                 {showError ? <div>{errorMsg}</div> : null}
             </div>
         )
    }
}

3. 排查errorMsg对应自定义组件的逻辑：将其所有触发状态更新的操作从render方法中迁移到componentDidUpdate/useEffect等生命周期钩子中，保证render方法是无副作用的纯函数。

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