时间戳

首页 > 解决方案 > React js超过最大更新深度

reactjs - React js超过最大更新深度

问题描述

我正在为我的代码中的更新做一个条件。基本上，我的代码正在使用这一行

{this.state.index === 20 ? this.setState({index: 0,index2: 1}) : null }

（这条线在渲染中）

现在我想与一个变量进行比较。但是当我在做

{this.state.index === this.state.list.length ? this.setState({index: 0,index2: 1}) : null }

我有错误

Error: 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.

我不明白这两行之间的区别，所以我不明白为什么会出现这个错误。有人可以向我解释为什么我有这个吗？谢谢

更新：我的渲染：

 render() {
    return (
      <div>
          Search Film :
      <form onSubmit={this.mySubmitHandler}>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      <input
        type='submit'
      />
      </form>
         {this.state.list.slice(this.state.index, this.state.index2).map(function(stock, id){
         return (<p key={id}> Title : {stock.title}  <br></br>release date : {stock.release_date}<br></br> popularité : {stock.popularity} <br></br> résumé : {stock.overview.substring(0,150)}...</p>)})}

         {this.state.index === this.state.list.length ? this.setState({index: 0,index2: 1}) : null }
     {this.state.index === -1 ? this.setState({index: 0,index2: 1}) : null }


        Top {this.state.list.length} Search : {this.state.index + 1}/ {this.state.list.length}
        <button onClick={() => {this.setState({index: this.state.index + 1,index2: this.state.index2 + 1})}}>Next Film</button>
    <button onClick={() => {this.setState({index: this.state.index - 1,index2: this.state.index2 - 1})}}>Previous Film</button>
    </div>

    );
  }

标签： reactjsrender

解决方案

问题是我渲染中的 setState 。

为了解决这个问题，我只是改变了我的状况。

基本上，在我的渲染中，我在使用按钮时调用了一个函数

<button onClick={() => {this.checkclick()}}>Next Film</button>

并且功能和以前一样

checkclick() {
    this.setState({index: this.state.index + 1,index2: this.state.index2 + 1})
    if (this.state.index === this.state.list.length)
      this.setState({index: 0,index2: 1})
  }

推荐阅读