UseEffect에 의해 트리거되는 무제한 API 호출

Question

컴포넌트 FrindListWidget가 두 가지 조건에서 호출되는 MERN 프로젝트를 만들었습니다.

1. 사용자 자신의 친구 목록인 경우 위젯이 렌더링되고 Reduxuser.friends의 상태가 업데이트됩니다.
2. 다른 사용자라면 위젯만 렌더링됩니다. Redux 상태는 업데이트되지 않습니다.

매번 Friend 还包含一个 ，它将添加或删除 Friend. Chrome 개발자 도구에서 Network 탭을 확인하기 전까지는 모든 것이 잘 작동하고 있었던 것 같습니다. friends 被无限次调用。为了说清楚，我写了console.log("friends",friends);를 감지했습니다. 네, 여러 번 녹음되었습니다. 다음 코드를 공유합니다:

FriendListWidget.jsx

으아악

Friend.jsx

으아악

userRequest는 단지 axios 메소드입니다:

으아악

useEffect 후크에서 종속성을 제거해 보았습니다.

으아악

단, 한 번만 렌더링됩니다. 실행 중에는 를 통해 업데이트가 표시되지 않습니다. 업데이트를 보려면 창을 다시 로드해야 합니다.

Answer 1

useEffect에 삽입한 사용자 목록을 업데이트하는 getFriends() 함수를 호출한다고 가정합니다. 따라서 useEffect가 자체적으로 무한히 업데이트되도록 하고 useEffect가 다른 값에 종속되도록 해보세요.

으아아아

이 경우 저는 개인적으로 반응 쿼리를 사용하고 활성화된 속성을 사용하여 API를 다시 호출할 시기를 결정합니다. 그러나 논리에 심각한 문제가 있으며 이해할 수 없습니다. CodeSandBox와 같은 플랫폼을 사용하여 최소한의 재사용 가능한 쿼리를 통해 더 나은 도움을 드릴 수 있습니다.