时间戳

首页 > 解决方案 > 如何阻止调用堆栈过载？

javascript - 如何阻止调用堆栈过载？

问题描述

我的问题很简单，但令人愤怒。我想做的就是有一个onClick事件，当触发时会改变组件的状态。唯一的问题是，如果我不停止addActiveClass函数最初使用加载的 state 属性运行，那么我会得到调用堆栈重载，因为这个组件是由.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;

标签： javascriptreactjs

解决方案

你的问题在这里

        <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 '()'
        >

推荐阅读