은 그것에 가능한 모든 업데이트 object's 의 속성으로 setState?
다음과 같습니다.
this.state = {
jasper: { name: 'jasper', age: 28 },
}
가:
this.setState({jasper.name: 'someOtherName'});
이:
this.setState({jasper: {name: 'someothername'}})
첫 번째 결과는 구문에 오류가 두 번째는 그냥 아무것도하지 않습니다. 어떤 아이디어가?
의 여러 가지 방법이 있습니다 이 일을,이후 상태 업데이트비동기업,그래서를 업데이트 상태의 개체,우리는 우리를 사용할 필요가업데이터 함수setState
.
1-장:
첫 번째의 복사본을 만들어jasper
다음에서 변경된:
this.setState(prevState => {
let jasper = Object.assign({}, prevState.jasper); // creating copy of state variable jasper
jasper.name = 'someothername'; // update the name property, assign a new value
return { jasper }; // return new object jasper object
})
를 사용하는 대신개체입니다.당
우리는 또한 write it like this:
let jasper = { ...prevState.jasper };
2-를 사용하여[확산 연산자]3:
this.setState(prevState => ({
jasper: { // object that we want to update
...prevState.jasper, // keep all other key-value pairs
name: 'something' // update the value of specific key
}
}))
참고:개체입니다.지정
및`확산 연산자를 만듭얕은 복사,그래서 만약 당신이 정의 중첩된 개체는 개체의 배열을,당신은 필요한 다른 방법으로 접근하고 있습니다.
가 정의한 상태:
this.state = {
food: {
sandwich: {
capsicum: true,
crackers: true,
mayonnaise: true
},
pizza: {
jalapeno: true,
extraCheese: false
}
}
}
를 업데이트 extraCheese 자의 개체:
this.setState(prevState => ({
food: {
...prevState.food, // copy all other key-value pairs of food object
pizza: { // specific object of food object
...prevState.food.pizza, // copy all pizza key-value pairs
extraCheese: true // update value of specific key
}
}
}))
가정 할 수 있습 있 잭 응용 프로그램,그리고 관리하는 데이터 이 양식에서는:
this.state = {
todoItems: [
{
name: 'Learn React Basics',
status: 'pending'
}, {
name: 'Check Codebase',
status: 'pending'
}
]
}
를 업데이트 상태의 어떤 일체,실행 지도에 배열 및 확인에 대한 몇 가지 독특한 각각의 가치를 객체의 경우에는상태=true 스
,새로운 객체를 업데이트 값을 다른 동일한 개체입니다.
let key = 2;
this.setState(prevState => ({
todoItems: prevState.todoItems.map(
el => el.key === key? { ...el, status: 'done' }: el
)
}))
의 제안:는 경우 객체지 않't 는 독특한 가치,다음 사용하 배열 색인.
내가 사용하는 이 솔루션입니다.
이 있는 경우에는 중첩된 상태는 다음과 같다:
다.state={ formInputs:{ friendName:{ 값:'', isValid:false, errorMsg:'' }, friendEmail:{ 값:'', isValid:false, errorMsg:'' } } }
당신이 선언할 수 있습 handleChange 기능은 해당 복사본은 현재 상태 및 재 할당으로 변경된 값
handleChange(el) {
let inputName = el.target.name;
let inputValue = el.target.value;
let statusCopy = Object.assign({}, this.state);
statusCopy.formInputs[inputName].value = inputValue;
this.setState(statusCopy);
}
여기에는 html 이벤트에 청취자 수 있습니다. 사용할 수 있는지 확인하십시오 같은 이름으로 사용되는 주체(이 경우에는'friendName')
<input type="text" onChange={this.handleChange} " name="friendName" />
첫 번째 사건은 실제로는 구문 오류가 있습니다.
이후 나는't 시의 나머지의 구성 요소,그's 하는 이유를 참조하십시오'다시 중첩에서 객체의 상태는 여기에. It's 지 않는 좋은 생각이 중첩체에서 구성 요소 상태가 됩니다. 도 설정을 초기 상태:
this.state = {
name: 'jasper',
age: 28
}
는 방법,업데이트 할 경우 이름을,당신은 단지 전화:
this.setState({
name: 'Sean'
});
는 것이 무엇을 달성'다시 목표로 하는가?
에 대한 더 크고,더 복잡한 데이터 저장,무언가를 사용하는 것이 같은 돌아오. 그러나는's 훨씬 더 많은 고급합니다.
일반적인 원칙으로 구성 요소 상태를 사용하는 것에만 관리 UI 구성 요소의 상태(예:active,타이머,etc.)
다음 사이트를 참조하십시오:
-https://facebook.github.io/react/docs/react-component.html#state -https://facebook.github.io/react/docs/state-and-lifecycle.html
내가 알고있는 대답을 많이 여기에,그러나 나는'm 놀라게 그들의 아무도의 복사본을 만들고 새로운 객체의 외부 setState,그리고 단순히 setState({newObject}). 깨끗하고 간결하고 신뢰할 수 있습니다. 그래서 이 경우는 다음과 같습니다.
const jasper = { ...this.state.jasper, name: 'someothername' }
this.setState(prevState => ({ jasper }))
또한 동적 재산(매우 유용한 형태)
const 재스퍼={...다.상태입니다.재스퍼,[VarRepresentingPropertyName]:'새로운 가치'} 다.setState(출하고 다시 쓰게=>({재스퍼}))
당신이 시도할 수 있습을 표시해야 합니다.
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState.name = 'someOtherName';
return {jasper: prevState}
})
또 다른 속성:
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState.age = 'someOtherAge';
return {jasper: prevState}
})
할 수 있습니다 또는 사용 handleChage 기능:
handleChage(event) {
const {name, value} = event.target;
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState[name] = value;
return {jasper: prevState}
})
}
HTML 코드:
<input
type={"text"}
name={"name"}
value={this.state.jasper.name}
onChange={this.handleChange}
/>
<br/>
<input
type={"text"}
name={"age"}
value={this.state.jasper.age}
onChange={this.handleChange}
/>
를 시도 할 수 있습니다 이: (****참고:이름을 입력 tag===필드의 객체) `` <input name="유사"type="text" value={this.상태입니다.myObject.유사} onChange={this.handleChangeInpForm}>
handleChangeInpForm=(e)=>{ 자 newObject=다.상태입니다.myObject; newObject[e.대상입니다.name]=e.대상입니다.치 다.setState({ myObject:newObject }) } ``
간단한 동적 방법입니다.
이 일을 할 것입니다,하지만 당신은 설정할 필요가 모든 id 를 부모 그래서 부모의 이름을 가리키는 개체되고,id="jasper"그리고 이름을 입력 요소의 이름=는 시설 내에는 개체의 jasper.
handleChangeObj = ({target: { id , name , value}}) => this.setState({ [id]: { ...this.state[id] , [name]: value } });
또한,다음과 같은 알베르토 Piras 솔루션,지 않는 경우't 복사하려는 모든"상"체:
handleChange(el) {
let inputName = el.target.name;
let inputValue = el.target.value;
let jasperCopy = Object.assign({}, this.state.jasper);
jasperCopy[inputName].name = inputValue;
this.setState({jasper: jasperCopy});
}
이것은 다른 솔루션을 사용하여immerimmutabe 유틸리티,매우 적합합을 위한 중첩된 객체로 용이해야 합니다 걱정하지 않을 돌연변이
this.setState(
produce(draft => {
draft.jasper.name = 'someothername
})
)