React 컴포넌트의 상태에 객체를 저장합니까?

React 컴포넌트의 상태에 객체를 저장합니까?

---

React 컴포넌트의 상태에 객체를 저장할 수 있습니까? 그렇다면 어떻게 해당 객체의 키 값을 setState? 나는 구문 적으로 다음과 같이 쓸 수 없다고 생각합니다.

this.setState({ abc.xyz: 'new value' });

비슷한 줄에 또 다른 질문이 있습니다. React 구성 요소에 변수 세트를 보유하여 상태에 저장하는 대신 구성 요소의 모든 메서드에서 사용할 수 있도록해도 괜찮습니까?

컴포넌트에서 메소드를 선언하는 것과 같이 이러한 모든 변수를 보유하고 컴포넌트 레벨에 배치하는 간단한 객체를 생성 할 수 있습니다.

코드에 많은 비즈니스 로직을 포함하고 여러 메서드에 의해 값이 변경되는 많은 변수를 사용해야하는 상황이 발생할 가능성이 매우 높습니다. 그런 다음 이러한 값을 기반으로 구성 요소의 상태를 변경해야합니다.

따라서 모든 변수를 상태에 유지하는 대신 값이 UI에 직접 반영되어야하는 변수 만 유지합니다.

이 방법이 내가 여기에 쓴 첫 번째 질문보다 낫다면 객체를 상태에 저장할 필요가 없습니다.

---

kiran의 게시물 외에도 업데이트 도우미 (이전 의 반응 애드온 )가 있습니다. 다음을 사용하여 npm으로 설치할 수 있습니다.npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

이렇게하면 업데이트 된 값으로 새 개체가 만들어지고 다른 속성은 동일하게 유지됩니다. 이것은 배열에 푸시하고 동시에 다른 값을 설정하는 것과 같은 작업을 수행해야 할 때 더 유용합니다. 어떤 사람들은 불변성을 제공하기 때문에 모든 곳에서 사용합니다.

이렇게하면 다음과 같이 성능을 보완 할 수 있습니다.

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

---

1. this.setState({ abc.xyz: 'new value' });구문은 허용되지 않습니다. 전체 개체를 통과해야합니다.

   this.setState({abc: {xyz: 'new value'}});
   

   abc에 다른 변수가있는 경우

   var abc = this.state.abc;
   abc.xyz = 'new value';
   this.setState({abc: abc});
   

2. this.props 및에 의존하지 않는 경우 일반 변수를 가질 수 있습니다 this.state.

---

덮어 쓰기를 방지하기 위해 객체의 이전 값에 ES6 스프레드 를 사용할 수 있습니다.

this.setState({
     abc: {
            ...this.state.abc,
            xyz: 'new value'
           }
});

---

this.setState({abc: {xyz: 'new value'}});state.abc병합되지 않고 완전히 덮어 쓰기되므로 작동 하지 않습니다.

이것은 나를 위해 작동합니다.

this.setState((previousState) => {
  previousState.abc.xyz = 'blurg';
  return previousState;
});

내가 문서를 잘못 읽지 않는 한 Facebook은 위의 형식을 권장합니다. https://facebook.github.io/react/docs/component-api.html

또한 상태를 변경하지 않고 가장 직접적인 방법은 ES6 spread / rest 연산자를 사용하여 직접 복사하는 것입니다.

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

---

불변성 도우미 또는 이와 유사한 방식을 통해 수행 할 수 있지만 실제로 필요한 경우가 아니면 코드에 외부 종속성을 추가하고 싶지 않습니다. 필요한 경우 Object.assign. 암호:

this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})

HTML 이벤트 속성에서도 사용할 수 있습니다. 예 :

onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}

---

한 줄의 코드로 더 쉬운 방법

this.setState({object: {...this.state.object, objectVarToChange: newData}})

참고 URL : https://stackoverflow.com/questions/27105257/storing-an-object-in-state-of-a-react-component