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

【问题标题】：How to update react state array of objects如何更新对象的反应状态数组
【发布时间】：2017-08-08 05:52:16
【问题描述】：

我有一个简单的轮播类型组件。它有 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});
}

我的想法是获取每张幻灯片并使用左侧的幻灯片更新其类。如果是第一张幻灯片，则取数组类中的最后一张幻灯片。

这似乎不起作用，我认为它与不可变状态有关，但我根本无法解决如何解决问题。

【问题讨论】：

仅供参考，目前的结果是每张幻灯片都有一类右后卫
你不应该更新'activeSlide'号码吗？ this.setState({ slides, activeSlide : this.state.activeSlide - 1 });
也许在地图幻灯片 0 的第一步获得右后卫，在下一步幻灯片 1 获得幻灯片 0 的类别，即右后卫...
btw 类是 JavaScript 中的保留字，我不会将它用于变量名，只是出于风格问题
@FurkanO 你是正确的，活动幻灯片将被更新。它只是与这部分代码无关。它只是一个参考，以查看单击非活动幻灯片时的旋转方式。

标签： javascript reactjs state immutability

【解决方案1】：

所以在阅读了上面的 cmets 之后，我得出了以下解决方案。

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

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

【讨论】：