reactjs imageスライダーナビゲーション機能は、うまく機能しないようです。

Question

私は配列に3つの画像が含まれた単純な画像スライダーを持っています。画像と画像の間を行き来できる1つの関数でスライダーを移動したいだけです。最後の画像で次の画像をクリックすると最初の画像が表示され、逆も同様ですが、これは正しく動作しません。最初の画像をクリックすると何も表示されず、クリックすると何も表示されません次react documentationから

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

から(imgArrayLength + imgNo + n) % imgArrayLength：

はにあなたのコードを変更し、それらが重複しているので、私はまた状態からこの小道具を削除します

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メソッドでは、これを使用します。 state.imgArray [this.state.imgNo]。

Answer 2

最後の画像の後：

setState（）はthis.stateをただちに変更するのではなく、保留状態遷移を作成します。このメソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。

ですから、呼び出し初めて：

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

this.state.imgNoは変更されませんでした。あなたが使用して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] 
     }) 
    }