개체의 반응 상태 배열을 업데이트하는 방법

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

기본적으로 현재 상태를 참조로 사용할 수 있도록 상태의 슬라이드 사본을 만듭니다.