ComponentDidUpdate SetState ReactJS 무한 루프

Question

같은 제목 줄에 많은 질문이 있지만 문제에 대한 대답을 얻을 수 없습니다.

문제는 내가 선택 드롭 다운 있습니다. 그 중 하나를 클릭하면 Api를 호출하여 키 값을 가져옵니다. 필자는이 키 값 입력 필드 집합을 구성 요소로 간주합니다. 따라서 각 선택 드롭 다운 메뉴에서 API 호출을 처리하는 데 라이프 사이클 메소드를 사용했습니다. 또한이 입력 키 값을 기록하고 부모 구성 요소로 상태를 되돌려 보냅니다. ReactJS 수명주기 방법에 따라

는 :

나는 초기 렌더링 후 처음으로 API를 호출하려면 componentDidMount

를 사용합니다. 이 작동합니다.

componentDidUpdate 선택 드롭 다운에서 이후 API 호출을 위해 API를 호출하는 방법. 그러나 여기에 문제가 있습니다. 입력 필드의 상태를 업데이트하려고하면 프로그램이 무한 루프에 빠지며 따라서 무한한 API 호출이 발생합니다. 꽤 문제가 setState(), 디버깅 후 꽤 있지만 componentDidUpdate 메서드에서 상태를 처리하는 가장 좋은 방법을 찾을 수 couldnt.

이 link 정확히 내 문제를 복제하지만 난이 분명하다 표준화 된 솔루션을

희망합니다. 미리 도움을 주셔서 감사합니다!

Answer 1

예, componentDidUpdate 내에 setState()를 사용하면 무한 루프가 발생할 수 있습니다. 대신에 onChange 이벤트를 호출하고 거기에서 상태를 변경할 수 있습니다.

Answer 2

이는 setState가 componentDidUpdate에 대한 호출을 트리거하기 때문에 발생합니다.

componentDidUpdate가 호출 될 때 setState는 상태 변경이 발생했는지 여부를 확인하지 않습니다. 단순히 componentDidUpdate를 반복해서 호출하기 때문에 stackoverflow가 발생합니다. 여기

class Component extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = {changeState: false} 
    } 
    componentDidMount(){ 
     this.setState({changeState: true}); 
    } 
    componentDidUpdate(){ 
     this.setState({changeState: false}); 
    } 
} 

먼저 changeState는 생성자에서 거짓으로 설정되고, 그 후 componentDidMount true로 changeState의 상태를 설정하는 트리거된다. 이 상태 변경은 changeState의 상태를 다시 true로 설정하는 componentDidUpdate를 트리거합니다. 그러면 componentDidUpdate가 반복적으로 트리거됩니다.