useEffect data fetching cancel 해결방법 있을까요?

Question

import React from "react"; const Parent = () => { const [open, setOpen] = useState(false) const [post, setPost] = useState([]) const fetchData = async () => { const res = await getPost() setPost(res) } useEffect(() => { fetchData() }, [open]) return ; }; export default Parent;현재 이렇게 부모는 post를 가져오고import React, { useState } from "react"; const Child = ({ open, setOpen }) => { const [user, setUser] = useState([]); const fetchData = async () => { const res = await getUser(); setUser(res); }; useEffect(() => { fetchData(); }, [open]); return ( <> {open && user && setOpen(false)} />} ); }; export default Child;자식 컴포넌트는 user를 가져오고있습니다. 모달이 열리면 데이터를 추가하고 모달이 닫혔을때 open이 바뀌면서 새롭게 post 데이터를 가져오는데 여기서 click 버튼을 눌렀을때 getUser에서 Uncaught (in promise) CanceledError {message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED', config: {…}, stack: 'CanceledError: canceled at throwIfCancellation…cancle이런 에러가 뜨더라구요.. open, setOpen을 자식 컴포넌트에서 직접 선언하면 정상작동은 되지만 그렇게되면 부모의 fetchPost를 업데이트할수가 없어서 props로 넘겼습니다.. 이게 open이 변경되면서 fetchData(getUser)가 취소된거같은데.. 왜이러는지 해결방법 아시는분 계실까요??

ㅇㅅㄱ · Answer

fetchData 윗줄에 if(open) 추가 해 보세요.

useEffect data fetching cancel 해결방법 있을까요?

1개의 답변

Q&A 목록