React报Maximum update depth exceeded错误，如何存子组件返回值到父组件？

报错根因 #

你遇到的Error: Maximum update depth exceeded错误是由于代码直接在渲染逻辑中同步调用setState导致的：setState会触发组件重新渲染，重新渲染又会再次执行setState，形成无限循环，React为了避免页面卡死触发了深度限制保护。

你原有写法还存在不符合React设计规范的问题：不应该将组件实例存入state，state应用于存储业务数据，组件实例应放在render方法中声明渲染。

修复方案 #

方案1：通过回调实现父子组件通信（适用于ChangeNavColor为UI组件的场景） #

父子组件值传递的标准实现是父组件向子组件传递回调函数，子组件计算完成后调用回调将值回传给父组件：

1. 父组件中定义接收颜色值的回调方法

// 父组件内定义，不要写在render方法中
handleNavColorUpdate = (calculatedColor) => {
  this.setState({ navColor: calculatedColor })
}

2. 父组件渲染子组件时传入回调

// 父组件render方法内的子组件声明部分
<ChangeNavColor 
  stage={this.state.Stage}
  onColorGet={this.handleNavColorUpdate}
/>

3. 子组件计算完成后调用回调回传值

// ChangeNavColor组件内完成颜色计算的逻辑处
const finalColor = '你计算得到的颜色值'
this.props.onColorGet(finalColor)

方案2：抽离为公共工具函数（适用于ChangeNavColor无UI仅做计算的场景） #

如果ChangeNavColor不需要渲染任何界面，仅用于计算颜色值，可以直接抽离为普通函数，避免组件通信的复杂度：

1. 抽离计算逻辑

// 可单独放在公共工具文件中，也可直接定义在父组件内
const getNavColor = (stage) => {
  // 原ChangeNavColor组件中的颜色计算逻辑
  if (stage === 1) return '#fff'
  if (stage === 2) return '#000'
  // 其余判断逻辑
  return '#ccc'
}

2. 在stage变更时更新state
   不要在render中直接调用setState，可在componentDidUpdate生命周期中监听stage变化后更新颜色：

// 父组件生命周期方法
componentDidUpdate(prevProps, prevState) {
  // 仅当stage值变化时才重新计算并更新state，避免多余更新
  if (prevState.Stage !== this.state.Stage) {
    const newColor = getNavColor(this.state.Stage)
    this.setState({ navColor: newColor })
  }
}

额外注意事项 #

• 所有setState调用都不应该放在render方法的同步执行逻辑中，仅可在事件回调、生命周期钩子、异步请求回调等场景调用
• state禁止存储组件、函数等非序列化数据，仅存储渲染需要的基础数据即可

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