Question

我正在研究React应用程序。我有一个按钮，该按钮调用一个函数，可在其中更改应用程序的状态。单击按钮后，我要继续更改状态，直到再次单击按钮（停止）为止。目前，我正在这样做

state = {

        startX:0

    }
changeX = () => {
        //console.log("changex")

        this.setState({startX: this.state.startX + (1/25)} , ()=>{
            console.log(this.state.startX)
            this.changeX()
        })
    }

<button onClick={this.changeX.bind(this)}>Change</button>

我说一个错误

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.

Answer 1

此错误是由react引发的，因为您是在没有退出条件的情况下递归调用this.changeX来产生stack overflow。

基本上，您正在这样做：

function foo() {
  foo()
}

foo()

这意味着，一旦您调用foo（），该Programm将永远运行，因为它不会停止自行调用。

这就像您有一个不间断的while（true）循环。

您可以使用以下方法避免此问题：

setInterval(function, timeout)

示例：

class SomeComponent extends React.Component {
  state = {
    x: 0
  }

  startAnimation = () => {
    const interval = setInterval(() => {
      this.setState({ x: this.state.x + 50 })

      if(x > 500) {
        clearInterval(interval) 
      }
    }, 50)
  }

  render() {
     return <button onClick={startAnimation}>Click me!</button>
  }
}

此示例将每50毫秒将x值更改为50。您可以随意调整这些值。但重要的是，如果setInterval函数中的if语句，则当值位于所需位置时，它将停止动画。

setInterval上的资源：https://www.w3schools.com/jsref/met_win_setinterval.asp

更新循环中的状态不起作用

1 个答案: