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

Question

我有一个简单的图像滑块，数组中包含 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)} />

Answer 1

来自 react documentation:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

所以你第一次打电话：

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]
        })
    }

Answer 2

您可以使用 - (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].

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

reactjs image slider navigation function, cant seem to get it working properly

javascript

frontend

slider

reactjs