Reactjs : 배열 요소를 제거하고 요소 상태가 따르지 않습니다.

Question

제목에서이 질문의 단어를 올바르게 말하기 어렵습니다.

시나리오 : React 앱은 기본적으로 닫혀있는 3 개의 요소 (드롭 다운)의 배열을 표시합니다.

I open the second dropdown: 
0: state.isOpen: closed 
1: state.isOpen: open 
2: state.isOpen: closed 

I remove the FIRST element of the array: 
0: state.isOpen: closed 
1: state.isOpen: open 

나는 새로운 첫 번째 요소가 열리고 두 번째 요소는 닫히기를 기대하기 때문에 이상합니다. 상태가 요소를 따르지 않는 것처럼 보입니다 (예 : 두 번째 요소 상태는 제거 후 새로운 두 번째 요소로 이동합니다). 나는 배열을 돌연변이 시키려고 시도하지 않고 새로운 배열을 만들고 그것을 setstate에 사용했다. 그러나 같은 결과를 보였다.

새로운 [0]이 (가) 열려 있고 [1]이 (가) 닫힐 것으로 예상됩니다. 어떻게해야합니까? 감사.

//Accounts.js: 
accounts.map(() => { return <Account/>}) 
removeAccount =() => { 
    let accounts = this.state.accounts.map(item => return item) 
    accounts.splice... 
    this.setState({accounts: accounts}) 
} 

//Account.js: 
state.isOpen 
removeAccount = this.props.removeAccount 

Answer 1

나는 당신이 제대로 배열을 복제하지 않는 생각 :

removeAccount =() => { 
    let accounts = [...this.state.accounts]; // Cloning first 
    accounts = accounts.map(item => return item) // Do your mappings here 
    accounts.splice... // Do your modifications here 
    this.setState({accounts: accounts}); // Set the new state 
} 

Answer 2

당신은 Array.prototype.slice() 아무것도 건드리지 않고 당신의 firstelement를 제외 array 새로운 브랜드 return에 활용할 수 있습니다.

실용적인 예는 아래를 참조하십시오.

removeAccount =() => { 
    return this.setState((state) => {accounts: [...state.accounts.slice(1)]}) 
}