React js 超出最大更新深度

Question

我正在为我的代码更新做一个条件。基本上，我的代码正在处理这条线

{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>

    );
  }

Answer 1

问题出在我渲染中的 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})
  }

Answer 2

当我没有在路由器中设置路径时，我遇到了这个问题。之后我在路由器的 PrivateRoute 中使用了路径名并且它起作用了。

错误：

右：

React js 超出最大更新深度

React js Maximum update depth exceeded

render

reactjs