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

我有一個簡單的傳送帶類型組件。它有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

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

回答

相關問題