리액트 오류
Uncaught TypeError: Cannot read properties of undefined (reading '0')
=> 배열이 비어있을 때 발생하는 오류. product.images배열의 첫 번째 요소를 참조하려고 하지만 비어있어서 오류 발생
해결 방안 : 조건부 렌더링 해주기!
{product.images.length > 0 ? (
<div className='product-detail-img'>
<img src={`http://localhost:8000${product.images[0]['image_file']}`} alt={product.name} />
</div>
) : null}
다음과 같이 조건을 설정해주면 이미지 배열이 비었을 경우에 이미지를 렌더링하지 않고 null을 반환하기 때문에 에러가 발생하지 않는다
'내일배움캠프 > 내일배움캠프 TIL' 카테고리의 다른 글
내일배움캠프 TIL 74일차 (0) | 2023.06.25 |
---|---|
내일배움캠프 TIL 73일차 - bulk_create() (0) | 2023.06.25 |
내일배움캠프 TIL 71일차 - 코드 추가 개선 (0) | 2023.06.19 |
내일배움캠프 TIL 70일차 - 백엔드에서 페이지네이션 처리 (0) | 2023.06.19 |
내일배움캠프 TIL 69일차 - 예외처리 해결 (0) | 2023.06.16 |