reactjs图像滑块导航功能，似乎无法正常工作答案

【问题标题】：reactjs image slider navigation function, cant seem to get it working properlyreactjs图像滑块导航功能，似乎无法正常工作
【发布时间】：2016-10-24 06:39:15
【问题描述】：

我有一个简单的图像滑块，其中包含 3 个图像，包含在一个数组中，我只想使用 1 个可以在图像之间来回切换的功能来导航滑块图像，反之亦然，这是我可以做的，但它不能正常工作，相反，如果你点击第一张图片，它什么也不显示，当你点击最后一张图片后的下一步时也不显示任何内容

constructor() {
    super()
    this.state = {
      imgArray: [ "/img/work1.jpg", "/img/work2.jpg", "/img/work3.jpg"],
      imgNo: 0,
      imgArrayLength: 2,
      current: "/img/work1.jpg",
      headlines: ["Pink Floyd Office", "Led Zeppelin Mania", "Central Perk Friends"],
      headline : "Pink Floyd Office"
    };
  }

changeImg(n){
    this.setState({
      imgNo: this.state.imgNo += n
    })
    if(this.state.imgNo > this.state.imgArrayLength){
      this.setState({
        imgNo: 0
      })
    }
    else if(this.state.imgNo < 0){
      this.setState({
        imgNo: this.state.imgArrayLength
      })
    }
    this.setState({
      current: this.state.imgArray[this.state.imgNo],
      headline: this.state.headlines[this.state.imgNo]
    })
  }

<img src="/img/slider-left.png" class="slider-arrow" onClick={this.changeImg.bind(this, -1)} />
 <img src="/img/slider-right.png" class="slider-arrow slider-right" onClick={this.changeImg.bind(this,  1)} />

【问题讨论】：

标签： javascript reactjs slider frontend

【解决方案1】：

您可以使用 - (imgArrayLength + imgNo + n) % imgArrayLength 计算imgNo：

changeImg(n) {
  const {
    imgArrayLength, imgNo
  } = this.state;

  const current = (imgArrayLength + imgNo + n) % imgArrayLength;

  this.setState({
    imgNo: current,
    current: this.state.imgArray[current],
    headline: this.state.headlines[current]
  })
}

我也会从状态中删除这些道具，因为它们是多余的：

current: this.state.imgArray[current],
headline: this.state.headlines[current]

在render 方法中使用this.state.imgArray[this.state.imgNo]。

【讨论】：

【解决方案2】：

来自react documentation：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

所以你第一次打电话：

this.setState({
  imgNo: this.state.imgNo += n
})

this.state.imgNo 没有改变。

将您的代码更改为：

    changeImg(n){
        var imgNo; this.state.imgNo += n;

        if(imgNo > this.state.imgArrayLength){
            this.setState({
                imgNo: 0
            })
        }
        else if(imgNo < 0){
            this.setState({
                imgNo: this.state.imgArrayLength
            })
        }
        this.setState({
            current: this.state.imgArray[imgNo],
            headline: this.state.headlines[imgNo]
        })
    }

【讨论】：