useParams 로 가져온 값 기준으로 데아터를 더 좁혀서 추출해야한다.
하지만 계속 빈값으로 추출된다. 원인은?
원인
: 난 당연히 useParams 로 가져왔을때 /서울 이라면 서울로 가져올 줄 알고 비교하는 코드를 짰는데 자꾸 빈값을 추출하길래 console을 찍어보니 아래 사진처럼 값이 나왔다..
해결법
-> 이거는 URL 인코딩된 문자열이라고 하는데
인코딩 : URL에서 사용할 수 없는 문자를 안전하게 변환하는 방법
-> 이런 이유로 내가 원하는 서울 그대로 쓰려면 디코딩을 해야한다.
디코딩 : 인코딩된 데이터를 원래의 형식으로 변환하는 과정
decodeURIComponent 함수 사용
const params = useParams(); //서울
const region = decodeURIComponent(params.id); //디코딩으로 새로 저장
useEffect(() => {
if (userId) { //로그인한 유저아이디가 있고
const fetchData = async () => {
try {
const res = await fetchStampActive(userId); //로그인 유저의 스탬프 테이블 데이터 전체 가져오기
const decodedParams = region; //디코딩된것 저장
const res2 = res?.filter((item) => item.region === decodedParams); //전체데이터 중 디코딩된것과 값이 같은거만 추출
setStampData(res2); //상태에 저장
} catch (error) {
console.error(error);
}
};
fetchData();
}
}, [params.id, userId]);코드 짜기전에 꼭 콘솔로 값 다 확인하기..꼭꼭.....
