Question

我的问题很简单但令人发指。我要做的只是有一个onClick事件，该事件在触发时会更改组件上的状态。唯一的问题是，如果我没有停止addActiveClass函数以加载状态prop最初运行，那我会得到调用堆栈重载，因为该组件是由.map函数呈现的。

第二秒钟我在状态更改逻辑上删除了if (this.state.loaded) { //logic }

请帮助我理解为什么我不能在React中做这个简单的事情。

class IndividualQA extends Component {
  constructor(props) {
    super(props);
    // this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      active: false,
      loaded: false
    };
    // this.state({ arrowState: this.props.arrowClass });
  }
  addActiveClass = (load) => {
    if (this.state.loaded) {
      const currentState = this.state.active;
      console.log(this.state);
      this.setState({ active: !currentState });
    }
  };

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xl-11 col-lg-11 col-md-11 col-sm-10 col-10">
            {this.props.data.Q}
          </div>
          <div className="col-xl-1 col-lg-1 col-md-1 col-sm-2 col-2 Question">
            <a
              data-toggle="collapse"
              href={`#QA${this.props.id}`}
              id="arrowSVG"
              onClick={this.addActiveClass()}
            >
              <img
                style={{ height: "30px" }}
                className={this.state.active ? "transform" : ""}
                src={downArrow}
              />
            </a>
          </div>
        </div>
        <div className="row collapse" id={`QA${this.props.id}`}>
          <div className="col-xl-11 col-lg-11 col-md-11 col-sm-11 col-11 As-a-long-time-Kiva">
            {this.props.data.A}
          </div>
        </div>
        <hr />
      </div>
    );
  }
}

export default IndividualQA;

Answer 1

您的问题在这里

        <a
          data-toggle="collapse"
          href={`#QA${this.props.id}`}
          id="arrowSVG"
          onClick={this.addActiveClass()} //here
        >

这样addActiveClass将在每次渲染时被调用，并可能导致无限循环。

您需要将其更改为

        <a
          data-toggle="collapse"
          href={`#QA${this.props.id}`}
          id="arrowSVG"
          onClick={this.addActiveClass} // without '()'
        >

Answer 2

标签上的处理程序应为this.addActiveClass而不是this.addActiveClass()

如何停止超载调用堆栈？

2 个答案: