Question

我正在尝试让我的onClick方法handleClick设置active和groupCardInfo属性的状态。 active特别是一个布尔值，我正在使用此bool值来确定是否应扩展侧面菜单项。

调用handleClick的

SideMenuContainer 组件：

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>会导致handleClick运行多次。因此，它不是将active的值从false切换为true，而是将其来回切换了多次，以使它再次从false变为false。

导致这种情况的父级App.js中构造此方法的方式有什么不正确？：

  handleClick(properties){
    console.log("toggle click!")
    // this.setState({active : !this.state.active});

    this.setState({
      active: !this.state.active,
      groupedCardInfo: properties
    })

    console.log("the active state is now set to: " + this.state.active)
  }

Answer 1

这是因为您正在事件处理程序中调用该函数。 render第一次运行时，它将执行您的事件处理程序。您可以像其他onClick处理程序那样执行此操作：

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

或者您可以这样做：

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

但是随后您必须更改在点击处理程序中引用properties的方式。像这样：

handleClick(){
    const properties = this.props.properties

    this.setState({
      active: !this.state.active,
      groupedCardInfo: properties
    })

    console.log("the active state is now set to: " + this.state.active)
  }

Answer 2

尝试使用箭头功能，就像在其他onClick上所做的一样：

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

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

onClick方法连续多次运行setState，否定了预期的目的

2 个答案: