reactjs

이 토론은 한동안 진행되었으며 @Alexander T.의 답변은 나 같은 React의 최신 버전을 따르는 좋은 가이드를 제공했습니다. 그리고 동일한 API를 여러 번 호출하여 구성 요소를 새로 고치는 방법에 대한 추가 노하우를 공유 할 것입니다. 초보자가 처음에 직면 할 수있는 일반적인 문제 일 것입니다.

componentWillReceiveProps(nextProps)에서 공식 문서 :

prop 변경에 응답하여 상태를 업데이트해야하는 경우 (예 : 재설정) this.props 및 nextProps를 비교하고이 메소드에서 this.setState ()를 사용하여 상태 전이를 수행 할 수 있습니다.

여기서 우리는 부모 컴포넌트의 소품을 처리하고 API 호출을하고 상태를 업데이트하는 장소라고 결론 내릴 수 있습니다.

@Alexander T.의 예를 기반으로 :

export default class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {person: []};
  }

  componentDidMount() {
   //For our first load. 
   this.UserList(this.props.group); //maybe something like "groupOne"
  }

  componentWillReceiveProps(nextProps) {
    // Assuming parameter comes from url.
    // let group = window.location.toString().split("/")[*indexParameterLocated*];
    // this.UserList(group);

    // Assuming parameter comes from props that from parent component.
    let group = nextProps.group; // Maybe something like "groupTwo" 
    this.UserList(group);
  }

  UserList(group) {
    $.getJSON('https://randomuser.me/api/' + group)
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    return (...)
  }
}

---

최신 정보

componentWillReceiveProps() 더 이상 사용되지 않습니다.

다음은 일반적인 경우 API 배포와 관련이 있다고 생각되는 수명주기 의 일부 메소드 ( Doc의 모든 메소드 )입니다.

위의 다이어그램을 참조하여 :

• 에 API 배포 componentDidMount()

  여기에서 API 호출을 수행하는 적절한 시나리오는이 컴포넌트의 컨텐츠 (API 응답에서)가 정적이며 componentDidMount()컴포넌트가 마운트되는 동안 한 번만 실행되며 심지어 새로운 소품이 상위 컴포넌트에서 전달되거나 Leading 조치가 있다는 것 re-rendering입니다.
  구성 요소는 다시 렌더링 할 수 있지만 다시 마운트 하지 않는 차이를 확인 합니다. 문서
  에서 인용 :

원격 엔드 포인트에서 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하는 것이 좋습니다.

---

• 에 API 배포 static getDerivedStateFromProps(nextProps, prevState)

우리는 두 가지 종류가 있다는 것을주의해야 구성 요소 업데이트 , setState() 현재의 구성 요소 것 없는 트리거에이 방법을지도,하지만에서 다시 렌더링하거나 새로운 소품 부모 구성 요소는 않습니다. 우리는이 방법이 장착하는 동안 발생한다는 것을 알 수있었습니다.

템플릿과 같은 현재 컴포넌트를 사용하려는 경우 API를 배치하기에 적합한 위치 이며 API의 새 매개 변수는 상위 컴포넌트에서 가져 오는 소품 입니다.
API에서 다른 응답을 받고이 state구성 요소의 내용을 변경하기 위해 여기에 새로운 내용을 반환합니다 .

예를 들어
, 상위 구성 요소에 다른 자동차에 대한 드롭 다운 목록이 있으며이 구성 요소는 선택된 자동차의 세부 사항을 표시해야합니다.

---

• 에 API 배포 componentDidUpdate(prevProps, prevState)

와 static getDerivedStateFromProps()달리,이 메소드는 초기 렌더링을 제외한 모든 렌더링 직후에 호출됩니다. 하나의 구성 요소에서 API 호출 및 렌더링 차이를 가질 수 있습니다.

앞의 예 확장 :
우리는 2013 년 생산을 확인하려면이 차의 시리즈의 목록을 포함 할 수 있습니다 차량의 세부 정보를 표시 할 수있는 구성 요소를, 우리는 첫 번째를 이끌 … 목록 항목을 클릭하거나 선택하거나 수 있습니다 setState()이를 반영하기 이 구성 요소에서 동작 (예 : 목록 항목 강조 표시)을 수행하고 다음에서 componentDidUpdate()새 매개 변수 (상태)로 요청을 보냅니다. 응답을 얻은 후 setState()Car 세부 사항의 다른 컨텐츠를 렌더링합니다. 다음 componentDidUpdate()으로 인해 무한 루프가 발생 하지 않도록하려면 prevState이 메서드의 시작 부분을 활용 하여 API를 전송하고 새 콘텐츠를 렌더링할지 결정 하여 상태를 비교해야 합니다.

이 방법은 정말처럼 활용 될 수있는 static getDerivedStateFromProps()소품 만의 변경 사항을 처리 할 필요 props활용하여 prevProps. 그리고 componentDidMount()초기 API 호출을 처리 하기 위해 협력해야합니다 .

문서 에서 인용 :

… 또한 현재 소품을 이전 소품과 비교하는 한 네트워크 요청을 수행하기에 좋은 곳입니다 …

---

답변