Question

我想要一个简单的计数器每秒（或任何其他时间）更新状态。我使用setInterval是因为我不知道该怎么做。我希望状态更改反映在标记中并在屏幕上更改。

当前，该想法在没有setState的情况下有效，但是一旦添加setState，值将变得不确定，值跳变不正确，并发生无限循环。

 this.state = {
    numberLine: {
    1: {
      end: 42
       }  
      }
    }

我更改值，然后重新分配对象的整个值

  counter(start) {
    const that = this
    const copy = _.cloneDeep(this.state.numberLine)
    function timer() {
       copy['1'].end = start
       that.setState({
           numberLine: copy
        })
      }
       let counter = setInterval(timer, 1000)
      }


   renderCustomMarkUp(num) {
    this.counter(num)
     return (
       <span>
          {this.state.numberLine['1'].end}
        </span>
         )
       }


     // call in render
       {this.renderCustomMarkUp(this.state.numberLine['1'].end)}

我希望这里的值每部分更新一次。然后在打印状态时，希望看到值增加。取而代之的是，我要么偶尔出现类似跳跃一样的胡言乱语，要么死机。签出this demo。请确保离开前让计时器至少达到55-60。

看来setInterval这不是正确的方法。我该如何解决？

Answer 1

我已在代码沙箱中修复了您的演示：https://codesandbox.io/s/fragrant-dawn-kwp1w

您遇到的问题是，您在每个渲染器上都调用setInterval(timer, 1000)。因此，每次更新状态时，您都在调用setInterval(timer, 1000)，它设置了许多计时器，每隔1秒就会触发一次。

相反，我已更改了您的组件，以使其仅在组件安装时调用setInterval(timer, 1000)，并且在需要增加计数器值时也直接使用状态。

setInterval中的setState行为异常

1 个答案: