리액트 api 컴포넌트가 화면에 안나옵니다

Question

콘솔에 response.data랑 status찍어봤는데 200나오고 데이터도 잘 보입니다 근데 화면에 보이지가 않습니다ㅠㅜㅠㅠimport styled from 'styled-components' import Header2 from '../components/Header2.tsx' import Navbar2 from '../components/Navbar2.tsx' import playIcon from '../assets/images/play.png' import stopIcon from '../assets/images/stop.png' import StudyPostingModal from '../components/StudyPostingModal.tsx' import AddStudyModal from '../components/AddStudyModal' import Calendar from '../components/StudyCalendar.tsx' import { useState, useEffect } from 'react' import { useApiUrlStore } from '../store/store.ts' import axios from 'axios' import moment from 'moment'; interface calenderList { id: number content: string studyClass: string startTime: string endTime: string entireTime: string } const interestsList = [ { value: 'KOREAN', name: '국어' }, { value: 'MATH', name: '수학' }, { value: 'ENGLISH', name: '영어' }, { value: 'SCIENCE', name: '과학' }, { value: 'PROGRAMMING', name: '코딩' }, ] function StudyPage() { //스탑워치 const [currentImg, setCurrentImg] = useState(playIcon) const [time, setTime] = useState(0) const [isRunning, setIsRunning] = useState(false) const [interval, setIntervalId] = useState(undefined) //모달창 const [postingmodalOpen, setPostingModalOpen] = useState(false) const [addmodalOpen, setAddModalOpen] = useState(false) //props const [studyClass, setStudyClass] = useState(''); const [startTime, setStartTime]=useState('') const [endTime, setEndTime]=useState('') const { apiUrl } = useApiUrlStore() const [calenderList, setCalenderList] = useState([]) const ClickHandler = () => { //시간 형식 변환 const startTime = moment().format('YYYY-MM-DD HH:mm'); const endTime = moment().format('YYYY-MM-DD HH:mm'); if (!isRunning) { setCurrentImg(stopIcon) // 멈춤버튼 이미지로 변경 setStartTime(startTime); // 현재 시간을 startTime으로 설정 const interval = setInterval(() => { setTime((prevTime) => prevTime + 1000)}, 1000) setIntervalId(interval) // interval 변수 업데이트 setEndTime(endTime) setIsRunning(true) console.log(startTime) } else { setCurrentImg(playIcon) // 재생버튼 이미지 변경 clearInterval(interval) setIsRunning(false) console.log(endTime) } } const PostingOpenModal = () => { setPostingModalOpen(true) } const PostingCloseModal = () => { setPostingModalOpen(false) } const AddOpenModal = () => { setAddModalOpen(true) } const AddCloseModal = () => { setAddModalOpen(false) } //기록 전체조회 const getStudy = async () => { try { const access = localStorage.getItem('accessToken') const response = await axios.get(`${apiUrl}/calender`, { headers: { Authorization: `Bearer ${access}` }, }) setCalenderList(response.data) console.log(response.data) } catch (error) { alert('error'); } } useEffect(() => { getStudy() }, []) return (

//나머지코드 {Array.isArray(calenderList) && calenderList.map((calender) => ( {calender.studyClass} {calender.entireTime} ))} //나머지코드

) } export default StudyPage

저는바보인것같아요 · Answer

불러오는 코드는 별 문제 없어 보이지만 보통 이런 문제는 데이터 가져올 때 response.data.data 이렇게 들어 있을 수도 있고 아니면 불러오는 데이터가 배열이 아닌 경우가 있을 수도 있습니다 가져온 데이터 구조를 다시 한 번 잘 확인 해보시고 렌더링을 해보세요 가장 의심가는 부분은 Array.isArray에서 통과를 못 해서 그런경우 인 것 같은데 isArray인 부분을 ? 바꿔서 아닐 경우에 통과 못함 관련 렌더링을 작성해보시고 테스트 해보세요

리액트 api 컴포넌트가 화면에 안나옵니다

1개의 답변

Q&A 목록