代码之家 › 专栏 › 技术社区 › Ramazan Chasygov

超过最大调用堆栈大小React Redux

react-redux redux reactjs javascript

Ramazan Chasygov · 技术社区 · 9 年前

maximum call stack size exceeded .也许我理解错了 componentDidUpdate ,但它不应该运行一次,而应该运行1000次。如何修复它?

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amount: 0
    }
  }

  updateAmout() {
    let number = 0;
    this.props.comments.map((comment, index) => {

      if (comment.replyTo === null) {

        number += 1;
        this.setState({amount: number});
      }
      return null;
    });
  }

  componentWillMount() {
    this.updateAmout();
  }

  componentDidUpdate() {
    this.updateAmout();
  }

  render() {
    console.log(this.state.amount);
    return (
      <div className="comments-container">
        <div id="comments">
          <AddComment />
          <div className="comments-flow">
            <div className="comments-header">
              <div className="pull-right">
                <a href="" className="text-muted">Best</a> |
                <a href="" className="active">Newest</a> |
                <a href="" className="text-muted">Oldest</a>
              </div>
              <b>6 Comments</b>
            </div>
            <RenderComments />
          </div>
          <button className="btn btn-block">More...</button>
        </div>
      </div>

    ) // return
  } // render
} // App

2 回复 | 直到 9 年前

Dez 9 年前

每次在中修改状态时 componentDidUpdate ,异步抛出重新渲染。 updateAmount ,您正在修改状态。您正在调用该方法 ,因此您启动了一个无限的重新渲染循环,因此创建的这个无限循环最终会浪费javascript内存。

更新状态时的反应周期如下。所以你很容易理解为什么你会进入一个无尽的循环。

Has 8 年前

我找到了问题的答案。我需要使用 nextProps 论元与方法 componentWillUpdate 而不是 componentDidUpdate 方法

// before
componentDidUpdate() {
 this.updateAmout();
}

// after
componentWillUpdate(nextProps) {
  if (!_.isEqual(this.props, nextProps)) {
    this.updateAmout();
  }
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前