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

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

我的想法是把每张幻灯片放在左边并用幻灯片更新它的类。如果它是第一张幻灯片，请在数组的类中使用最后一张幻灯片。

这似乎不工作，我认为它与不可改变的状态有关，但我根本无法将我的未来围绕如何解决问题。

来源

2017-03-16 Cody James Tooker

仅供参考目前的结果是，每张幻灯片都得到一类右后壁 –

您不应该更新'activeSlide'数字吗？ this.setState（{slides，activeSlide：this.state.activeSlide - 1}）; – FurkanO

也许在第一步的地图幻灯片0得到右后卫，在下一步幻灯片1得到幻灯片0的类，这是右后卫... –

因此，阅读上述评论后，我来到以下解决方案。

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

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

来源

2017-03-16 21:42:08

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

回答

相关问题