하위 React 구성 요소에 전달된 useEffect를 사용할 때 함수가 여러 번 호출됩니다.

Question

여러 개의 ChildComponent 태그가 있는 페이지가 있고 사용자가 클릭한 ChildComponent에 따라 호출할 API를 각 ChildComponent에 알려주고 싶습니다. onClick()은 모달을 엽니다.

모달이 열리면 API 호출이 두 번 이루어지는 것을 확인했습니다. 모달을 닫으면 API 호출이 다시 이루어집니다.

이 기사를 통해 React가 올바르게 작동한다는 것을 배웠습니다. React 기능 구성 요소에서 함수를 여러 번 호출합니다

한 번에 하나의 Axios API 호출만 있도록 구조화하는 다른 방법이 있나요?

으아아아 으아아아 으으으으

Answer 1

React 18을 사용하는 경우 반응성에서 이 오류가 발생하는 경우 이 게시물을 확인하세요. https://taig.medium.com/prevent-react-from-triggering-use효과-twice-307a475714d7

Answer 2

귀하의 문제와 작업을 잘 이해하면 솔루션을 작성해 보겠습니다.

상위 구성 요소에 모달 제어 상태가 있으므로 변경이 있을 때마다 상위 구성 요소가 다시 렌더링되고 하위 구성 요소도 다시 렌더링됩니다. 함수는 JS의 객체이므로 가져오기 기능은 매번 다른 링크 다시 렌더링되고 ChildComponent의 useEffect는 함수가 변경된 것으로 간주합니다.

그래서 가장 좋은 해결책은 자녀 컴포넌트에 export default memo(ChildComponent) （您可以从“react”导入备忘录）。之后，您应该使用 useCallback 包装 fetchPosts 和 handleOnclick。你会得到类似的东西 const fetchPosts = useCallback(() => doSomething(), [])

와 같은 메모를 추가하는 것입니다.

도움이 되길 바랍니다.