axios 오류를 잡고싶습니다..

Question

axios.get을 사용하여 api로부터 데이터를 불러오고자 했습니다.아래는 그룹 목록 조회하는 코드입니다.//그룹 전체 목록 조회 //option = ("all", "study", "project") export function getGroupPosts(type){ axios.get(`${BASE_URL}/post/view/${type}`,{ headers:{ Authorization: accessToken } }) .then(function(response){ // 받은 데이터로 수행할 작업 console.log(response); }) .catch(function(error){ console.log(error); }); }아래는 적용할 컴포넌트입니다.import styled from "styled-components"; import React, { useEffect, useState } from "react"; import BannerSlider from "../components/MainPageComponents/Banner/BannerSlider"; import MainCategory from "../components/Category/MainCategory"; import MainCardList from "../components/MainPageComponents/MainCardList"; import SearchBar from "../components/MainPageComponents/SearchBar/SearchBar"; import DateButton from "../components/Button/DateButton"; import MainOptionButton from "../components/Button/MainOptionButton"; import cards from "../components/Data/CardData"; import { getGroupPosts } from "../components/Apis/GroupPostApi"; // pages/Main.js export const SearchContainer = styled.div` width: 100%; display: flex; justify-content: space-between; flex-direction: row; gap: 10px; @media (max-width: 768px) { flex-direction: column; justify-content: start; align-items: start; } @media (max-width: 480px) { } `; export const MainButtonContainer = styled.div` display: flex; gap: 10px; justify-content: center; /* 버튼들을 가로 가운데 정렬 */ @media (max-width: 350px) { display: none; } `; const Main = () => { const banners = [ { id: 1, imgUrl: "/banner/banner1.png" }, { id: 2, imgUrl: "/banner/banner2.png" }, { id: 3, imgUrl: "/banner/banner3.png" }, { id: 4, imgUrl: "/banner/banner4.png" }, ]; const categories = ["전체", "프로젝트", "스터디"]; const [activeCategory, setActiveCategory] = useState('전체'); const [searchDate, setSearchDate] = useState(null); const [isOptionActive, setIsOptionActive] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [filteredCards, setFilteredCards] = useState(cards); const [isChanged, setIsChanged] = useState(false); const [groupPosts, setGroupPosts] = useState([]); const [error, setError] = useState(null); // 그룹 전체 useEffect(() => { const fetchGroupPosts = () => { getGroupPosts('all') .then(response => { setGroupPosts(response.data); console.log(response); }) .catch(error => { console.error(error); }); }; fetchGroupPosts(); }, []); useEffect(() => { const filteredByCategory = cards.filter(card => activeCategory === '전체' || card.category === activeCategory ); const searchedCards = filteredByCategory.filter(card => { // title, tags, profile name에 대해 검색어가 포함되어 있는지 확인 const isTitleMatch = card.title.toLowerCase().includes(searchTerm.toLowerCase()); // tags는 배열이라고 가정하고 각 태그를 검색 const isTagMatch = card.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())); // profile name도 포함한다고 가정하고 검색 const isProfileNameMatch = card.profile.name.toLowerCase().includes(searchTerm.toLowerCase()); // title, tags, profile name 중 하나라도 일치하면 필터링 return isTitleMatch || isTagMatch || isProfileNameMatch; }); const dateFilteredCards = searchedCards.filter(card => { const cardDeadline = new Date(card.deadline); const isAfterSelectedDate = searchDate ? cardDeadline > searchDate : true; if (isOptionActive) { return isAfterSelectedDate && cardDeadline > new Date(); } return isAfterSelectedDate; }); setFilteredCards(dateFilteredCards); }, [activeCategory, searchDate, isOptionActive, searchTerm]); const handleSearchDate = (date) => { setSearchDate(date); }; const handleOptionButtonClick = () => { setIsOptionActive(prev => !prev); }; const handleSearchTermChange = (term) => { setSearchTerm(term); }; return ( <>

모집 중만 보기

); } export default Main; groupPosts 상태값을 만들어서 데이터를 받아온뒤 이것으로 쏴주려 했습니다. 이게 전체 조회니까 searchedCards에 넣으면 돌아갈 줄 알았는데요. 그러면 Cannot read properties of undefined (reading 'then') 에러가 뜹니다... 데이터가 없어서 뜨는 에러라는데요... 그래서 아하! searchedCards는 검색을 위한 기능이므로 되지 않겠구나! 생각했습니다. 다음으로 몰색한 곳은 이곳인데 여기가 카드가 보여지는 곳이라 생각이 들었습니다. 그래서 filteredCards 이곳에 groupPosts를 넣어봤는데요. 여전히 빈 칸만 보이더라구요.. 제가 axios에 대해 너무 어렵게 생각하고 있는걸까요? 3일내내 axios만 붙들고 있는 것 같습니다... 제가 만든 코드가 아니라서 이해가 좀 느린 것 같습니다... 만든 사람은 런을 쳐서요...좀 도와주시겠어요?

세브라이드 · Answer

=ㅇ=;;export function getGroupPosts(type){ return axios.get(`${BASE_URL}/post/view/${type}`,{ headers:{ Authorization: accessToken } }) .then(function(response){ // 받은 데이터로 수행할 작업 console.log(response); return response; }) .catch(function(error){ console.log(error); }); }리턴이 빠졌네요...넣어드렸읍니다...

axios 오류를 잡고싶습니다..

1개의 답변

Q&A 목록