React，HTML和JavaScript:错误:超过最大更新深度

Question

在我的React应用程序中，我收到以下错误：“错误：超过了最大更新深度。当组件重复调用组件内部的setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环”。一旦for循环完成，我就改变了状态。我不知道我做错了什么。任何帮助都将不胜感激。

//React
class Pagination extends Component {
  state = {
    li: []
  }

  liTags = (pageNum) =>{
    return(  <li className="PageNumber" key={pageNum}><span>{pageNum}</span></li>)
  }

  pagincationScript = (totalPages, page) =>{
    let li = []

    for(let i = 1; i < totalPages; i++){
      li.push(this.liTags(i))

    }
    this.setState({
      li: li
    })

    if(page > 1 && page < totalPages){
    
      return(
        <React.Fragment>
          <li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>
          {this.state.li}
          <li className="Btn Previous"><span><i>&#8594;</i>Next</span></li>
        </React.Fragment>
      )
    }
  }

  render() {
    return (
      <div className="Pagination">
        <ul>
          {this.pagincationScript(10,5)}
        </ul>
      </div>
    )
  }
}

export default PagePagination;

Answer 1

将您的liTags（）移到paginationScript（）内，并将

Answer 2

您基本上是在导致堆栈溢出。
您在渲染中调用setState，但是，因为setState调度另一个渲染，您的代码会导致无限循环。

您需要停止调用this.setState每次渲染。
在您的例子中，您不需要将li放在组件的状态中，您可以简单地渲染{li}。

pagincationScript = (totalPages, page) => {
  let li = []

  for(let i = 1; i < totalPages; i++) {
    li.push(this.liTags(i))
  }

  if(page > 1 && page < totalPages) {

    return(
      <React.Fragment>
        <li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>
          {li}
        <li className="Btn Previous"><span><i>&#8594;</i>Next</span></li>
      </React.Fragment>
    )
  }
}

但是，如果需要它位于状态内，则应将填充 this.state.li 的代码移动到生命周期方法，如 componentDidUpdate（如果使用钩子，则应使用Effect）。