외부 React에서 컴포넌트 상태 업데이트(서버 응답 시

외부 React에서 컴포넌트 상태 업데이트(서버 응답 시

리액트를 배우는 중입니다.지금 몇 개 있어요.components부모-자녀로서 체인으로 되어 있기 때문에 콜백에 의해 이들 간의 통신이 용이하게 이루어집니다.

테이블(반응 성분)과 작은 모달 아약스 형태(반응 없음)가 있습니다.서버로부터 답변(아이템)을 받으면 테이블에 아이템을 추가하고 싶습니다.

주요 질문은 외부 반응에서 컴포넌트 상태 변경을 트리거할 수 있는가(이 경우 서버 응답에서)입니다.

컴포넌트 외부에서 컴포넌트 상태 변경을 트리거할 수 있습니까?

네. 여기 간단한 예가 있습니다.

반응 구성요소에서 함수가 실행될 때 상태를 업데이트하는 전역적으로 사용 가능한 폐쇄를 설정합니다.

componentDidMount(){
 globalVar.callback = (data) => {
    // `this` refers to our react component
    this.setState({...});     
  };
}

그런 다음 Ajax'd 응답이 돌아오면 반환된 데이터로 이벤트를 시작할 수 있습니다.

globalVar.callback(data);

또는 보다 강력한 기능을 위해 커스텀 이벤트 또는 서브스크립션을 사용합니다.

component국가의 베스트 프랙티스는 진정한 내적 관계를 유지하는 것이다.state데이터가 해당되지 않습니다.새 외부 데이터 사용에서 구성 요소를 변경해야 하는 경우props변경만 하면 됩니다.props컴포넌트 렌더는 변화에 반응합니다.

신규에 근거하다props컴포넌트는 그것들을 렌더에 사용하거나 컨스트럭터에서와 같이 상태를 변경할 수 있습니다.이 태스크의 올바른 위치는 에 있습니다.componentWillReceiveProps이 방법에서는, 새로운 소품으로부터 상태를 변경할 수 있습니다.영원한 루프 상태가 되지 않습니다.

업데이트: react 16.3 컴포넌트에서 WillReceiveProps는 폐지되고 getDerivedStateFromProps를 사용해야 하며, 불량 사용 사례 및 부작용 검출이 개선됩니다.https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops 를 참조해 주세요.

이 문서에는 상태에 영향을 미치는 방법에 대한 최신 버전이 있으며 코드 페이지 예제입니다.

코드의 이 부분이

  render() {
    return (
      <div onClick={this.increment}>
        <div>Parent Value - {this.state.counter} - Click to increment</div>
        <ChildComponent ref={(childComponent) => {window.childComponent = childComponent}}/>
      </div>
    )
  }

효과가 있습니다.

를 입력합니다.window서브 컴포넌트의 참조가 있는 오브젝트(있는 경우)는 다음과 같은 속성을 통과시킵니다.ref={(childComponent) => {window.childComponent = childComponent}.지금이다window.childComponent상태를 가져오거나 설정할 수 있는 하위 구성 요소에서 메서드에 액세스합니다.

원본 코드펜은 상태 읽기만 시도하기 때문에 쓰기 위해 확장했습니다.요령은 새로운 방법이다

setStateExt = (state) => {
    this.setState(this.state = state);
  }

저기 봐.

언급URL : https://stackoverflow.com/questions/31856712/update-component-state-from-outside-react-on-server-response