기권

React의 중첩 상태가 잘못 설계되었습니다.

이 훌륭한 답변을 읽으십시오 .

이 답변 뒤에 추론 :

React의 setState는 기본 제공 편의 기능이지만 제한이 있음을 곧 깨닫게됩니다. 사용자 정의 속성을 사용하고 forceUpdate를 지능적으로 사용하면 훨씬 더 많은 것을 얻을 수 있습니다. 예 :

class MyClass extends React.Component {
    myState = someObject
    inputValue = 42
...

예를 들어 MobX는 상태를 완전히 도랑 화하고 사용자 지정 관찰 가능 속성을 사용합니다.
React 컴포넌트에서 상태 대신 Observables를 사용하십시오.

당신의 불행에 대한 답은 – 여기 예 참조

중첩 속성을 업데이트하는 또 다른 짧은 방법이 있습니다.

this.setState(state => {
  state.nested.flag = false
  state.another.deep.prop = true
  return state
})

한 줄에

 this.setState(state => (state.nested.flag = false, state))

_{참고 :이 여기 쉼표 연산자 ~ MDN은 행동에서 볼 여기 (샌드 박스) .}

상태 참조를 변경하지는 않지만 비슷합니다.

this.state.nested.flag = false
this.forceUpdate()

_{이 컨텍스트 사이의 미묘한 차이 forceUpdate및setState 연결된 예를 참조.}

물론 이것은 state읽기 전용이어야하기 때문에 몇 가지 핵심 원칙을 남용하고 있지만 이전 상태를 즉시 버리고 새로운 상태로 교체하기 때문에 완전히 괜찮습니다.

경고

상태 를 포함하는 구성 요소가 올바르게 업데이트되고 다시 렌더링 되지만 ( 이 gotcha 제외 ) 소품이 하위 항목으로 전파 되지 않습니다 (아래 Spymaster의 설명 참조). . 수행중인 작업을 알고있는 경우에만이 기술을 사용하십시오.

예를 들어, 업데이트되어 쉽게 전달 된 변경된 플랫 소품을 전달할 수 있습니다.

render(
  //some complex render with your nested state
  <ChildComponent complexNestedProp={this.state.nested} pleaseRerender={Math.random()}/>
)

complexNestedProp에 대한 참조가 변경되지 않았더라도 ( shouldComponentUpdate )

this.props.complexNestedProp === nextProps.complexNestedProp

구성 요소가 됩니다 호출 한 후의 경우 부모 구성 요소를 업데이트 할 때마다 다시 쓰게 this.setState또는 this.forceUpdate부모에 있습니다.

상태 변경의 영향

사용하여 중첩 된 상태를 다른 개체가 (고의 또는하지) 보유하고있는 서로 다른 (이상) 참조 수 있기 때문에 직접 상태를 돌연변이 것은 위험 상태 때 갱신을 반드시 알고하지 않을 수 있습니다 (예를 들어, 사용하는 경우 PureComponent또는 경우 shouldComponentUpdate반환에 구현 false) 또는 이다 아래 예와 같이 이전 데이터를 표시하기위한 것입니다.

과거 데이터를 렌더링해야하는 타임 라인을 상상해보십시오. 데이터를 변경하면 이전 항목도 변경되므로 예기치 않은 동작이 발생합니다.

어쨌든 여기 Nested PureChildClass에서 소품이 전파되지 않아서 다시 렌더링되지 않았다는 것을 알 수 있습니다 .

답변

this.setState({
  someProperty: Object.assign({}, this.state.someProperty, {flag: false})
});

const newState = Object.assign({}, this.state);
newState.property.nestedProperty = "new value";
this.setState(newState);

import update from 'immutability-helper';

const newState = update(this.state, {
  someProperty: {flag: {$set: false}},
};
this.setState(newState);

import {set} from 'lodash/fp';

const newState = set(["someProperty", "flag"], false, this.state);

import {merge} from 'lodash/fp';

const newState = merge(this.state, {
  someProperty: {flag: false},
});