오류 : 수정 불가능하고 고정 된 개체에 키를 설정하려고 시도했습니다.

Question

이 오류와 관련된 문제를 추적하는 데 어려움을 겪고 있습니다. 이는 변경 불가능한 개체를 업데이트하려고 함을 의미합니다. 이상하게도, 나는이 동작을 너무 혼란스럽게 만드는 이유 때문에 장애없이이 구현을 사용했습니다.

다음은 사용중인 메서드입니다. 단순히 배열의 개체를 변경하고 속성을 변경하고 업데이트 된 상태를 반환합니다. here으로 표시된 것처럼 prevState을 사용하면 불변성을 해결하는 최적의 방법 인 것으로 보입니다.

onCheck = (id) => { 
    this.setState((prevState) => { 
    prevState.options[id].checked = !prevState.options[id].checked; 
    return { 
     options: prevState.options, 
     dataSource: prevState.cloneWithRows(prevState.options) 
    }; 
    }); 
} 

는 또한 그러나 여전히 나에게 같은 불변성 오류를주고있다는 prevState 복사의 변화의 숫자를 시도했습니다. prevState을 복제하는 것이 아니라 여전히 참조하는 것처럼 보입니다. 귀하의 질문에

onCheck = (id) => { 
    this.setState((prevState) => { 
     let options = [...prevState.options]; 
     options[id].checked = !options[id].checked; 
     return { 
     options: options, 
     dataSource: this.state.cloneWithRows(options) 
     }; 
    }); 
    } 

Answer 1

변이하는 것이 좋습니다. 배열의 개별 요소/객체는 여전히 변경 불가능/고정되어 있습니다.

onCheck = (id) => { 
    this.setState((prevState) => { 
     const newOptions = prevState.options.map((option, index) => { 
     let copyOption = {...option}; 
     if (id == index) { 
      copyOption.checked = !copyOption.checked; 
     } 
     return copyOption; 
     }); 
     return { 
     options: newOptions, 
     dataSource: this.state.dataSource.cloneWithRows(newOptions) 
     }; 
    }); 
    } 

Answer 2

, 당신은 당신이 할 수없는 상태를, 돌연변이 것을 인정합니다. 이것에 대한 수정은 prevState.options를 복제하기 전에 복제하는 것입니다.

예 : reference 지적 당신의 당신이 당신의 링크에서

prevState.options[id].checked = !prevState.options[id].checked; 

을하는 것처럼, 당신이 직접 데이터를 변이 안으로

var options = Object.assign({}, prevState.options) 
options[id].checked 
return { 
     options, 
... 

Answer 3

, 그들은 concat 또는 ("구문을 전파"하여 새 배열을 반환 ..). 그래서 나는 내가 배열하지만 배열의 각 요소뿐만 아니라 복사에 필요한 나타납니다, 당신은 당신의 prevState 첫째을 복사하여 내가 결국 해결책을 발견 그것은

let state = [...prevState.options]; 
state[id].checked = !state[id].checked; 
...