错误：超过最大更新深度。 React 限制嵌套更新的数量以防止无限循环答案

【问题标题】：Error: Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops错误：超过最大更新深度。 React 限制嵌套更新的数量以防止无限循环
【发布时间】：2021-12-22 18:07:07
【问题描述】：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

我在 react JS 中创建了一个返回颜色名称的组件。我只想将该颜色名称存储在我的父组件中，那么我该怎么做呢？

这是我的代码行，它正在创建错误：

{this.setState({navColor: <ChangeNavColor stage={this.state.Stage}/>})}

或者有没有其他方法可以将此组件返回值存储在一个变量中，并将该变量分配给这个“navColor”状态？

【问题讨论】：

这个状态更新相对于它周围的代码在哪里排队？它与更新状态的组件的关系在哪里？将 JSX 存储在 React 状态、存储数据并从中渲染派生 UI 也是反模式。
另外，你为什么将组件作为状态传递？从技术上讲，您可以这样做，但您不应该这样做。状态仅用于数据。

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

你需要调用函数：

{()=>this.setState({navColor: <ChangeNavColor stage={this.state.Stage}/>})}

【讨论】：