如何更新對象的反應狀態數組

Question

我有一個簡單的旋轉木馬類型組件。 它有5張幻燈片和一張當前幻燈片，可以用以下狀態表示。

this.state = {
  slides: [{
    title: "Slide One",
    class: "left-back"
  },
  {
    title: "Slide Two",
    class: "left-middle"
  },
  {
    title: "Slide Three",
    class: "front-side"
  },
  {
    title: "Slide Four",
    class: "right-middle"
  },
  {
    title: "Slide Five",
    class: "right-back"
  }],
  activeSlide: 2
};

我需要處理旋轉這個輪播，我想通過簡單地更新每張幻燈片的類來實現。 實際動畫將全部用css完成。 要將幻燈片向左旋轉，我有一個rotateLeft函數，如下所示。

rotateLeft() {
  console.log('RotateLeft');
  const slides = this.state.slides.map( (slide, index, arr) => { 
    if (index === 0) {
      slide.class = arr[4].class;
    } else {
      slide.class = arr[index - 1].class;
    }
    return slide;
  });

this.setState({slides});
}

我的想法是每張幻燈片並使用左側的幻燈片更新其類。 如果是第一張幻燈片，則選擇數組類中的最后一張幻燈片。

這似乎不起作用，我認為它與不可變狀態有關，但我根本無法解決如何解決問題。

Answer 1

所以在閱讀上面的評論后，我得出了以下解決方案。

rotateLeft() {
console.log('RotateLeft');
//create a deep copy
let slides = this.state.slides.map(a => Object.assign({}, a));

//store the last class to be used later on the first object in the array
let lastClass = slides[this.state.slides.length - 1].slideClass;

slides = slides.map( (slide, index) => { 
  if (index === 0) {
    slide.slideClass = this.state.slides[this.state.slides.length - 1].slideClass;
  } else {
    slide.slideClass = this.state.slides[index - 1].slideClass;
  }
  return slide;
});

this.setState({slides, activeSlide: this.state.activeSlide + 1});
}

基本上，我在狀態下創建幻燈片的深層副本，以便我可以使用當前狀態作為參考。