반응에서 객체를 변경하는 방법

React에서 객체 속성을 변경하는 방법: 1. 상태에서 객체를 정의합니다. 2. obj 객체에 이름 및 연령 속성을 동적으로 추가하고 할당을 초기화합니다. 전체 개체 그게 다입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 개체를 변경하는 방법은 무엇입니까?

react setState는 객체 속성을 수정합니다

상태에 정의된 객체 속성을 변경해야 하므로, setState가 상태의 객체 속성에 직접 연산을 수행할 수 없는 것으로 확인되었습니다.

그럼 우리는 어떻게 해야 할까요? 조급해하지 말고 천천히 들어보세요. (네 헛소리는 전혀 듣고 싶지 않아요...)

먼저 상태에 객체를 정의합니다.

this.state = {
obj: {}
}

다음 단계는 동적으로 이름을 추가하는 것입니다. setState의 특성에 따라 obj 속성을 직접 변경할 수 있으므로 CoverObj라는 새 객체 객체를 만든 다음 이름, age 속성 및 이니셜을 추가할 수 있습니다. 이때 우리가 얻는 obj 객체는 CoverObj와 같습니다!

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})

위의 방법에 따르면 실제로는 CoverObj가 obj에 직접 덮어쓰여집니다. obj 자체에 다른 속성이 있는 경우 다른 속성이 손실됩니다.

this.state = {
obj: {hobby: '游泳'}
}
let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})
// 打印出来的obj是没有hobby属性的

따라서 전체 개체를 변경하려면 Object.asset() 메서드를 사용해야 합니다.

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign(this.state.obj, coverObj)   // 1
// let data2 = Object.assign({}，this.state.obj, coverObj)  // 2
this.setState({
obj: data2
})

참고 1 및 2: 위 두 메서드의 반환 값은 동일합니다. Object.sign 구문은 첫 번째 매개변수를 대상 객체로 취급하고 대상 객체를 기준으로 동작하므로 원래 대상 객체가 변경된다는 의미이므로 일반적으로 Object.sign을 사용할 때 대상이 다음으로 설정됩니다. 빈 객체는 새로운 객체를 반환하는 것과 같습니다.

다음으로 속성 이름의 값을 "Little Red"로 변경합니다. 전제는 변경해야 할 속성이 obj에 이미 존재하고 속성 이름이 변경된 값의 속성 이름과 일치한다는 것입니다. 개체의 속성:

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign({}，this.state.obj,coverObj, {name: '小红'}) ;
this.setState({
obj: data2
})
// 打印的 obj: {hobby: '游泳', name: '小红', age: 20}

이제 개체 속성 값을 변경하려는 목적을 달성했습니다.

Object.Assign 관련:

Object.Assign() 메소드는 하나 이상의 소스 객체의 모든 열거 가능한 속성 값을 대상 객체에 할당하는 데 사용됩니다. 대상 객체를 반환합니다.

구문: ​​Object.sign(target, ...sources)

setState():

1에 대해 세 가지를 알아야 합니다. State를 직접 수정하지 말고 setState():

2를 사용하세요. 비동기일 수 있습니다

3. 상태 업데이트가 병합됩니다

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 객체를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!