두 개의 배열(하나는 소품의 배열이고 다른 하나는 내 구성 요소의 배열)을 비교하는 다음 방법이 있습니다. props 배열에는 있지만 구성 요소 배열에는 없는 모든 요소를 세 번째 배열에 삽입하고 "destroy: true"라는 속성을 추가하여 데이터베이스에서 삭제하는 백엔드로 보낼 수 있습니다.
그러나 어떤 이유로 메서드에서 사용하는 변수 대신 내 소품이 업데이트됩니다. Prop을 직접 참조하지 않기 때문에 왜 이런 일이 발생하는지 잘 모르겠지만 해당 내용을 메서드 내의 변수에 복사합니다.
으아악왜 이런 일이 발생하나요? 내 구성 요소의 다른 요소는 잘 작동하지만 이 요소에만 문제가 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
예,
this.props.array배열의요소를 새로운 메소드 로컬 배열로 복사하고 있지만 배열의 요소는 객체이기 때문에 두 배열 모두동일한객체(객체에 대한 참조)를 포함하게 됩니다.확산 연산자를 사용하여 원본 요소의
let newElement = { ...element }얕은 복사본을 만들 수 있습니다. 이렇게 하면 원본 개체의 모든 속성을 복사하여 완전히 새로운 개체가 생성됩니다. 하지만 원본 객체의 속성에 배열/객체가 포함되어 있는 경우 동일한 문제에 직면하게 된다는 점에 유의하세요. 조금 더 깊이 들어가면 됩니다.