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

基本上，我在状态下创建幻灯片的深层副本，以便我可以使用当前状态作为参考。

如何更新对象的反应状态数组

1 个答案: