在地图功能中超出最大更新深度[重复]

Posted 2023-02-22

【中文标题】在地图功能中超出最大更新深度[重复]

【英文标题】：Maximum update depth exceeded when in map function [duplicate]

【发布时间】：2018-08-04 14:16:00

【问题描述】：

我正在尝试将一个函数从父级传递给一个子级，因此当有人单击子组件时，它会切换到另一个组件。所以我所做的是

class Comp extends Component 
  constructor(props) 
    super(props);
    this.state = active: true;

    this.handleClick = this.handleClick.bind(this);
  

  handleClick() 
    this.setState(active: !this.state.active);
  

  render() 

    return (
      <div>
  if(this.state.active)
              this.state.callerData.map((agent, i) => (
                <CompAltWidget compalt=compalt key=i handleClick=this.handleClick />
              ))
              else if(!this.state.active)this.state.callerData.map((agent, i) => (
                <compWidget comp=comp key=i handleClick=this.handleClick />
              ))
</div>
    );
  


export default Comp;

以及子组件：

class CompWidget extends Component 
  handleClick() 
    this.props.handleClick();
  
render() 
    return (
      <div >
<div className="wrapper" onClick=this.props.handleClick()>
                      <LineChart line1Data=this.props.comp />
            </div>
          </div>
    );
  


export default ComptWidget;

和 CompWidget -> CompAltWidget 的第二个组件。 我收到的消息是Maximum update depth exceeded，但即使我遵循以下解决方案ReactJS: Maximum update depth exceeded error 并将<CompAltWidget compalt=compalt key=i handleClick=this.handleClick() /> 更改为<CompAltWidget compalt=compalt key=i handleClick=this.handleClick />，错误仍然存​​在。有人能帮忙吗？谢谢

【参考方案1】：

你想写

<div className="wrapper" onClick=this.props.handleClick>