Question

我正在尝试编写一个onClick方法来切换子元素，但是我当前的实现导致以下错误：

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我不确定如何更改我的设置以免导致此无限循环。这是我的容器组件的设置方式：

import React, { Component } from 'react';
import styled from 'styled-components';

const NestedProperty = styled.div`
  margin-left: 2rem;
`;

const ParentContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const NestedContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

class SideMenuContainer extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
        active: false
    };
  }

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

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

    else {
      return (
        <ParentContainer>
          <p onClick={this.handleClick()}>{this.props.parentName}</p>
        </ParentContainer>
      );
    }

  }
}

export default SideMenuContainer;

从本质上讲，我想做的就是让它被使用，以便每当单击parentName时，其子级（NestedProperty）div就会打开和关闭。如果状态中的active属性为true，则子项NestedProperty div在父项下呈现，如果子项false仅父项名呈现。

什么原因导致了无限循环？

Answer 1

您错误地传递了函数handleClick。将其更改为

onClick={this.handleClick}

并且您需要绑定该功能，因此可以使用粗箭头符号实现

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

Answer 2

您的函数未与'this'正确绑定。如下使用它

    onClick = { () => this.handleClick() }

反应组件切换方法导致“未捕获的不变违反：超出最大更新深度。”错误

2 个答案: