필터 구성 요소의 반응 상태 수명주기

Question

필자는 필터 일뿐 아니라 날짜, 최소 최대 값 등의 구성 요소에서 상태를 올바르게 설정/읽는 방법에 대한 조언을 찾고 있습니다.

onMinDateChange(minDate) { 
    this.setState({minDate}); 
}, 

onMaxDateChange(maxDate) { 
    this.setState({maxDate}); 
}, 

... 

가 지금은 모든 상태 변화에 this.props.onChange()를 호출 할,하지만 두 가지 문제가 있습니다 :

내가 기본적으로이

• 의 상태가 즉시 업데이트되지 않습니다; 나는 이것을 "다음 틱"이라고 어떻게 부를 수 있습니까? componentDidUpdate?

• 내가 작성하지 않도록 어떤 상태 변화를 관찰하는 방법을 잘 모르겠어요 :

  onMinDateChange(minDate) { 
      this.setState({minDate}); 
      this.update(); 
  }, 
  
  onMaxDateChange(maxDate) { 
      this.setState({maxDate}); 
      this.update(); 
  }, 
  
  ... 
  

이러한 점 모두에 어떤 도움을?

Answer 1

this.setState()에 콜백을 전달할 수 있습니다. 아래 참조 :

_onStateUpdate() {  
    *Some code here* 
} 


onMinDateChange(minDate) { 
     this.setState({minDate}, _onStateUpdate); 
}, 

Answer 2

당신의 문제의 모두에 대해서, 본 프로그램 포함 :

나는 (prevProps 어떤 상태 변화

당신은 componentDidUpdate을 사용할 수를 관찰하는 방법을 잘 모르겠어요 , prevState) 콜백을 호출하고, 상태가 변경 될 때마다 내부를 결정합니다.

https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate

여기

당신은 상위 구성 요소와 해당 지역의 상태를 동기화하기 위해 노력하고 있습니다. 가능한 일이지만, 제대로하는 것은 어려운 일입니다. 특히 상단에서 일부 필터 값을 설정해야하는 경우가 있습니다. 필터의 상태를 상단 구성 요소로 이동하는 것을 고려하십시오.

이렇게하려면 setState 대신 구성 요소 소품으로 상태 개체와 함수를 전달해야합니다. 상태 객체는 상위 컴포넌트 상태의 일부로 저장됩니다.

값 링크를 사용하면 우아하게 보이게 할 수 있습니다. 기술에 대한 설명은 여기

import { Link } from 'valuelink' 
import { Input } from 'valuelink/tags.jsx' 

const UpperComponent = React.createClass({ 
    getInitialState(){ 
     return { 
      filter : { 
       text : '', 
       ... 
      } 
     } 
    }, 

    render(){ 
     return (
      ... 
      <Filter state={ Link.state(this, 'filter') } /> 
     ) 
    } 
}); 

const Filter = ({ state }) => (
    <div className="filter"> 
     <Input valueLink={ state.at('text') } /> 
     ... 
    </div> 
) 

것 : 여기 https://medium.com/@gaperton/state-and-forms-in-react-part-3-handling-the-complex-state-acf369244d37#.nuloz9adx

그리고는 LIB : 당신은 두 번째 인수로 콜백을 전달할 수 있습니다 https://github.com/Volicon/NestedLink