反应setState不能正常工作

Question

我正在使用ReactJS创建一个滑块。

我每2秒使用componentDidMount()从幻灯片0开始滑动条（使用setInterval()功能）。通过setState()方法更改幻灯片编号，效果很好。

我创建了两个按钮，通过单击来强制滑块向左或向右移动。另外，我为onClick()写了一种增加或减少幻灯片编号的方法。

一旦我单击其中之一，它就可以正常工作，并且状态成功更改。但是，此渲染将在单击之前重置为以前的状态！

例如，如果我在幻灯片2中并按了向左按钮，我应该期望显示幻灯片1并且确定。但是，在2秒钟后，它返回到幻灯片3，而不是2。

这怎么了？

state = {
  activeSlideNumber: 0,
}

//Total Number of items is 5

sliderLeft = () => {
  let leftnumber = 0
  let newActiveSlideNumber = this.state.activeSlideNumber
  newActiveSlideNumber === 0 ? leftnumber = 4 :  leftnumber = newActiveSlideNumber - 1 
  this.setState({
    activeSlideNumber: leftnumber
  })
}

componentDidMount() {
  let newActiveSlideNumber = this.state.activeSlideNumber
  setInterval(() => {
    newActiveSlideNumber === 4 ? newActiveSlideNumber = 0 : newActiveSlideNumber++
    this.setState({
      activeSlideNumber: newActiveSlideNumber
    })
  }, 2000)
}

Answer 1

仅在安装组件时， newActiveSlideNumber 将从状态中获取值。每2秒钟之后，它不会从状态中获取更新的值，因为语句 let newActiveSlideNumber = this.state.activeSlideNumber 在 setinterval 外em> 功能。