React.js의 상태 배열 수정

 

질문 : React.js의 상태 배열 수정

---

state 배열의 끝에 요소를 추가하고 싶습니다. 이것이 올바른 방법입니까?

this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });

push 하여 배열을 제자리에서 수정하면 문제가 발생할 수 있습니다. 안전합니까?

배열의 복사본을 만드는 대안과 낭비적인 setState

반응형

답변

---

React 문서 는 다음과 같이 말합니다.

this.state를 변경 불가능한 것처럼 취급하십시오.

push 는 상태를 직접 변경하므로 나중에 상태를 다시 "재설정"하는 경우에도 오류가 발생하기 쉬운 코드로 이어질 수 있습니다. componentDidUpdate 와 같은 일부 수명주기 메서드가 트리거되지 않을 수 있습니다.

이후 React 버전에서 권장되는 접근 방식은 경합 상태를 방지하기 위해 상태를 수정할 때 업데이트 기능을 사용하는 것입니다.

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
  }))
  

메모리 "낭비"는 비표준 상태 수정을 사용하여 직면 할 수있는 오류에 비해 문제가되지 않습니다.

이전 React 버전의 대체 구문

concat 을 사용하여 새 배열을 반환하므로 깨끗한 구문을 얻을 수 있습니다.

this.setState({ 
    arrayvar: this.state.arrayvar.concat([newelement])
    })
    

ES6에서는 스프레드 연산자를 사용할 수 있습니다.

this.setState({
      arrayvar: [...this.state.arrayvar, newelement]
      })
      

출처 : https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js