Reactjs onClick方法在一行中多次运行setState，与预期目的相反

我正试图让我的onClick方法

handleClick

设置

active

和

groupCardInfo

属性的状态

active

特别是一个布尔值，我使用这个布尔值来确定是否应该展开一个侧菜单项

SideMenuContainer调用

handleClick

的组件：

render() {
    if (this.props.active == true){
      return (
        <ParentContainer>
          <p onClick={this.props.handleClick(this.props.properties)}>{this.props.parentName}</p>        
          <NestedContainer>
            {this.props.properties.map(propertyElement => {
              return (
                <NestedProperty onClick={() => { this.props.changeInfoList(propertyElement.name, propertyElement.data_type, propertyElement.app_keys)}} >
                  {propertyElement.name}
                </NestedProperty>
              );
            })}
          </NestedContainer>
        </ParentContainer>
      );    
    }

<p onClick={() => this.props.handleClick(this.props.properties)}>

---

这是因为您正在事件处理程序中调用函数。第一次运行

render

时，它将执行事件处理程序。您可以像其他

onClick

处理程序一样执行此操作：

<p onClick={() => { this.props.handleClick(this.props.properties) }}>{this.props.parentName}</p>

---

这是因为您正在事件处理程序中调用函数。第一次运行

render

时，它将执行事件处理程序。您可以像其他

onClick

处理程序一样执行此操作：

<p onClick={() => { this.props.handleClick(this.props.properties) }}>{this.props.parentName}</p>

---

尝试使用箭头功能，就像您在另一个

onClick上所做的那样：

render() {
    if (this.props.active == true){
      return (
        <ParentContainer>
          <p onClick={this.props.handleClick(this.props.properties)}>{this.props.parentName}</p>        
          <NestedContainer>
            {this.props.properties.map(propertyElement => {
              return (
                <NestedProperty onClick={() => { this.props.changeInfoList(propertyElement.name, propertyElement.data_type, propertyElement.app_keys)}} >
                  {propertyElement.name}
                </NestedProperty>
              );
            })}
          </NestedContainer>
        </ParentContainer>
      );    
    }

<p onClick={() => this.props.handleClick(this.props.properties)}>

this.props.handleClick（this.props.properties）}>

渲染时调用
this.props.handleClick…
调用它。
然后，设置状态，使组件重新渲染。
尝试使用箭头功能，就像您在另一个
onClick上所做的那样：

render() {
    if (this.props.active == true){
      return (
        <ParentContainer>
          <p onClick={this.props.handleClick(this.props.properties)}>{this.props.parentName}</p>        
          <NestedContainer>
            {this.props.properties.map(propertyElement => {
              return (
                <NestedProperty onClick={() => { this.props.changeInfoList(propertyElement.name, propertyElement.data_type, propertyElement.app_keys)}} >
                  {propertyElement.name}
                </NestedProperty>
              );
            })}
          </NestedContainer>
        </ParentContainer>
      );    
    }

<p onClick={() => this.props.handleClick(this.props.properties)}>

this.props.handleClick（this.props.properties）}>

渲染时调用
this.props.handleClick…
调用它。
然后，设置状态，使组件重新渲染