Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- routing
- CI/CD
- S3
- rendering
- setstate
- 채팅방
- qwe
- Github Actions
- FileReader
- 배포
- previousState
- route
- Preview
- updater
- 접근 제한 라우팅
- 항해99
- 브라우저 렌더링
- react
- 스파르타코딩클럽
- useEffect
- 라우팅
- socket.io
- 비동기
- 동기
- 7기
- 후기
- 미리보기
- Redux
- imagePreview
- 개발
Archives
- Today
- Total
삐옹
[Error #2] 일주일 평점 남기기 undefined를 곁들인 본문
상황
props로 넘겨준 요일들이 자식으로 하나씩 잘 넘어가 화면에 오늘부터 일주일 간의 요일이 뜨면 완성인데
왠걸 요일도 없는 평점, 버튼 UI 끝 자리를 차지하고 있다.
props로 넘겨줄 데이터가 부모 컴포넌트에서 제대로 찍히는가?[o]
props로 받은 데이터가 자식 컴포넌트에서 제대로 받았는가?[x]
-> 갑분언? 갑자기 분위기 undefined란 뜻임.
해결
대체 저 undefined가 뭘까 고민을 해보았다.
개발자도구에 들어가 element를 살펴보니
감싸준 div의 밖에 있다고 나온다.
그렇다면 div 태그 아래에서 문제가 났음에 틀림없었다.
div 태그 아래에 있는건 Route 2개 뿐이다.
// 실패
return(
<Container className="App">
<h1>내 일주일은?</h1>
<div>
{DayList.map((day, idx) => <Home key={idx} day={day}></Home>)}
<div/>
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/review" component={Review}></Route>
</Switch>
</Container>
)
수상함을 느끼고
Route안에 map을 넣었더니
원하는 화면이 나왔다.
// 성공
//Home컴포넌트로 props를 보내주는 map 함수를
//Route안에서 컴포넌트로 props를 보내주기 위한 속성인 render 안에 콜백함수로 넣어줌
return(
<Container className="App">
<h1>내 일주일은?</h1>
<Switch>
<Route path="/" exact render={(props) => (DayList.map((day, idx) => <Home key={idx} day={day}></Home>))}></Route>
<Route path="/review" component={Review}></Route>
</Switch>
</Container>
)
map 함수 Route안에 넣어주어서 해결!
컴포넌트와 라우트를 따로보고 생긴 문제였다.
루트페이지에 있으면 Home컴포넌트를 보여달라는 코드가 있었으니
처음 화면처럼 나오는게 맞을 수 밖에.
넘어가는 props값이 없으니까 요일은 없는게 당연하다
정리
- 라우트랑 컴포넌트를 따로 보지말자
'오늘의 오류' 카테고리의 다른 글
useState에 의해 갱신 객체가 제대로 합쳐지지 않는 오류 (0) | 2022.07.20 |
---|---|
useEffect + setState 무한 요청 제발 그만 (0) | 2022.07.18 |
네아(네이버아이디)로 로그인하는 과정 한눈에 보자 (0) | 2022.07.04 |
[Error #3]버킷리스트 추가하기 버튼을 눌러도 빈 태그만 반환 될 때 (0) | 2022.05.31 |
[Error #1]'React Hook useEffect has missing dependencies' 에러 (0) | 2022.05.24 |