React 디펜던시 무한 API 호출
const __GetWineState = useCallback(() => {
return axios({
method: "GET",
url: process.env.BACK_EC2 + "wine",
// url: "http://j6a101.p.ssafy.io:8080/api/wine",
})
.then((res) => {
console.log(res);
setWines(res.data.object);
return res.data;
})
.catch((err) => {
return err;
});
}, []);
useEffect(() => {
__GetWineState();
dispatch(feedAction.getFeed());
}, [__GetWineState, dispatch]);
get요청한 API 무한호출할 때
디펜던시를 잘못 건 경우가 많다.
그럴경우 처음 get 호출한 API의 res.data를 useState에 setWines해서 그 wines변수를
하위 컴포넌트에서 사용하다가
특정 필터 조건이 적용됬을때
다시 리렌더 되서 무한 호출되는 경우가 있는데
이경우 첫 get 호출한 API의 res.data를 useState로 setWines 하고
그리고 dispatch(feedAction.getFeed()); 로 res.data를 리덕스에도 저장한다
const feedstate = useSelector((state: RootState) => state.feed.items);
const applyFilters = useCallback(() => {
let updatedList = feedstate;
console.log(updatedList);
// Rating Filter
if (selectedRating) {
updatedList = updatedList.filter(
(item: any) =>
item.ratingAvg >= parseFloat(selectedRating) &&
item.ratingAvg <= parseFloat(selectedRating) + Number(0.6)
);
}
...~~
}
여기서 3번째줄에 feedstate 를 필터 리렌더가 일어났을때 초기값으로 설정해줘야한다
만약 feedstate가 아니라 res.data로 저장한 ustState의 wines 를 직접 받아오면
필터되고 다시 applyFilters 함수가 실행됬을때
이미 해당 wines가 줄어들어서 다시 가격값을 상승시킬때나 다른 카테고리를 클릭했을때
그 줄어든 상태값에서 다시 필터가되서 처음 데이터 기준 필터가 되는것이아니라
필터된 데이터에서 다시 필터되는 상황이 온다 .
그러므로 초기 전체 호출된 온전한 값을 리덕스에 넣고
다시 applyFilters가 실행됬을 때 다시 리덕스의 온전한 값을 받아와서
새로운 updatedList 로 필터를 해줘야한다.
useState는 값이 변형되고 redux의 저장된 값은 다시 dispatch를 하지 않는 이상 변형되지 않는다.
Author And Source
이 문제에 관하여(React 디펜던시 무한 API 호출), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dear/React-디펜던시-무한-API-호출저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)