React 구성 요소 프로펠이 변경될 때 데이터를 가져오는 방법

React 구성 요소 프로펠이 변경될 때 데이터를 가져오는 방법

Translation Detail 컴포넌트는 오픈 시 ID가 전달되며, 이에 따라 클래스 컨스트럭터에서 외부 API 콜이 트리거되어 상태에 대한 데이터를 수신하고 이 데이터는 Translation Detail에 표시됩니다.

//Routing:
<Route path="/translation/:id" component={TranslationDetail}/>

//Class:    
class TranslationDetail extends Component {
  constructor(props){
    super(props);

    this.props.fetchTrans(this.props.params.id);
  }

URL을 수동으로 입력하면 모두 정상적으로 동작합니다.예를 들어 다음과 같이 다음 항목을 표시하기 위해 리액트 라우터를 사용하고 싶은 경우 url이 변경되지만 api 호출이 트리거되지 않고 데이터는 그대로 유지됩니다.

<button 
  type="button"
  onClick={() => 
    browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>
  Next
</button>

저는 완전 초보자라는 것을 명심해 주세요.이러한 현상이 발생하는 이유는 컨스트럭터가 한 번만 실행되기 때문에 더 이상 API 호출이 트리거되지 않기 때문입니다.

어떻게 하면 해결할 수 있을까요?소품 목록을 작성하고 변경 시 함수를 호출해야 합니까?만약 그렇다면, 어떻게?

생성자는 API 호출에 적합하지 않습니다.

라이프 사이클 이벤트를 사용해야 합니다.

• componentDidMount 초기 페치를 실행합니다.
• componentDidUpdate 다음 콜을 발신합니다.

의 이전 소품과 비교해 보십시오.componentDidUpdate원하는 소품이 바뀌지 않으면 가져오기를 피할 수 있습니다.

class TranslationDetail extends Component {    
   componentDidMount() {
     this.fetchTrans();
   }

   componentDidUpdate(prevProps) {
     if (prevProps.params.id !== this.props.params.id) {
       this.fetchTrans();
     }
   }

   fetchTrans() {
     this.props.fetchTrans(this.props.params.id);
   }
}

React 16.3 이후componentWillMount,componentWillUpdate그리고.componentWillReceiveProps는 권장되지 않습니다.

스태틱을 사용할 수 있습니다.getDerivedStateFromProps소품 변경에 따라 새로운 상태를 되돌립니다.

당신은 소품 같은 물건에 접근할 수 없기 때문에 비교가 안 됩니다.nextProps현재와 함께props타고nextProps.sth !== this.props.sth당신을 비교할 수 있습니다.prevState로 평가하다.nextProps새로운 상태의 값을 반환합니다.

sue를 추가하다UNSAFE_현재에 이르기까지componentWillMount그리고 지금은 사용되지 않는 다른 라이프 사이클 방법들이 있습니다.

componentWillMount를 사용하여 데이터를 가져오고 상태를 설정합니다.그런 다음 componentWillReceiveProps를 사용하여 소품 업데이트를 캡처합니다.

컴포넌트의 사양과 라이프 사이클을 확인할 수 있습니다.

저는 렌더 방식을 사용합니다.데이터가 로드되지 않으면 로더 스피너를 렌더링하여 데이터를 가져오는 액션을 던집니다.그래서 저는 주로 가게를 이용합니다.저장소에서 api에서 de 데이터를 가져오면 데이터를 loaded로 표시하고 이벤트를 발생시킨 후 저장소에서 데이터를 가져오도록 합니다. 이때 로더 스피너는 데이터 표현으로 대체됩니다.

언급URL : https://stackoverflow.com/questions/39000698/how-to-fetch-data-when-a-react-component-prop-changes