Question

React：未捕获的 RangeError：超出最大调用堆栈大小

2017-04-10

16095

javascript reactjs

我正在尝试使用 React，并且获得了我想要的功能，但由于某处存在无限循环，因此速度非常慢。我相信这是在组件生命周期方法中，但我不确定如何重新格式化以下代码以具有相同的功能但没有无限循环。任何有关最佳实践的建议都将不胜感激。

class App extends Component {
  constructor() {
    super();
    this.state = {
      num: 13,
      num2: 10,
      total: 0
    }
  }

  componentDidMount() {
    this.addNums();
  }

  componentDidUpdate() {
    this.addNums();
  }

  addNums(){
    var added = parseInt(this.state.num) + parseInt(this.state.num2);
    this.setState({total: parseInt(added)});
  }

  change(num) {
    this.setState({num: num});
    console.log(this.state);
  }
  change2(num2) {
    this.setState({num2: num2});
    console.log(this.state);
  }

  render(){
    return (
      <div>
        <TopBar />
        <Combinatoric test={this.state.num} changeNumber={this.change.bind(this)}/>
        <Combinatoric test={this.state.num2} changeNumber={this.change2.bind(this)}/>
        <h2>Total: {this.state.total}</h2>
        <h1>hello world</h1>
      </div>
    );
  }
}

Answer 1

就我而言，这是因为 react-helmet 组件使用了 deep-equal 包。我通过将版本从 5.2.0 升级到 6.0.0-beta 来修复此问题。

Answer 2

发生无限循环是因为您在 componentDidUpdate 生命周期函数中调用 this.addNums() 。 addNums 设置导致 componentUpdate 的状态，因此再次调用 ComponentDidUpdate ，因此循环继续。

您可以删除此函数，因为 num 和 num2 处于状态中，因此 total 可以在渲染中根据 num 和 num2 进行计算

class App extends Component {
  constructor() {
    super();
    this.state = {
      num: 13,
      num2: 10,
      total: 0
    }
  }


  change(num) {
    this.setState({num: num});
    console.log(this.state);
  }
  change2(num2) {
    this.setState({num2: num2});
    console.log(this.state);
  }

  render(){
    var total = parseInt(this.state.num) + parseInt(this.state.num2);
    return (
      <div>
        <TopBar />
        <Combinatoric test={this.state.num} changeNumber={this.change.bind(this)}/>
        <Combinatoric test={this.state.num2} changeNumber={this.change2.bind(this)}/>
        <h2>Total: {total}</h2>
        <h1>hello world</h1>
      </div>
    );
  }
}