-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
PostImages 이미지 length 오류
23.02.10 17:42 작성 조회수 251
0
PostImages.js
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { PlusOutlined } from '@ant-design/icons';
import ImagesZoom from './ImagesZoom';
const PostImages = ({ images }) => {
const [showImagesZoom, setShowImagesZoom] = useState(false);
const onZoom = useCallback(() => {
setShowImagesZoom(true);
}, []);
const onClose = useCallback(() => {
setShowImagesZoom(false);
}, []);
if (images.length === 1) {
return (
<>
<img role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} />
{showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
</>
);
}
if (images.length === 2) {
return (
<>
<div>
<img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} />
<img role="presentation" src={images[1].src} alt={images[1].src} width="50%" onClick={onZoom} />
</div>
{showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
</>
);
}
return (
<>
<div>
<img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} />
<div
role="presentation"
style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }}
onClick={onZoom}
>
<PlusOutlined />
<br />
{images.length - 1}
개의 사진 더보기
</div>
</div>
{showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
</>
);
};
PostImages.propTypes = {
images: PropTypes.arrayOf(PropTypes.shape({
src: PropTypes.string,
})).isRequired,
};
export default PostImages;
Post.js
export const initialState = {
mainPosts: [{
id: 1,
User: {
id: 1,
nickname: '제로초',
},
content: '첫 번째 게시글',
Images: [{
src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726',
}, {
src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg',
}, {
src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg',
}],
Comments: [{
User: {
nickname: 'nero',
},
content: '우와 개정판이 나왔군요~',
}, {
User: {
nickname: 'hero',
},
content: '얼른 사고싶어요~',
}]
}],
imagePaths: [],
postAdded: false,
};
const ADD_POST = 'ADD_POST';
export const addPost = {
type: ADD_POST,
};
const dummyPost = {
id: 2,
content: '더미데이터입니다.',
User: {
id: 1,
nickname: '제로초',
},
Images: [],
Comments: [],
};
export default (state = initialState, action) => {
switch (action.type) {
case ADD_POST: {
return {
...state,
mainPosts: [dummyPost, ...state.mainPosts],
postAdded: true,
};
}
default: {
return {
...state,
};
}
}
};
코드에 문제가 없는 것 같은데 위와 같이 에러가 뜹니다.
post.js파일도 비교해보면서 찾아봤는데도.. 답이 안보입니다.ㅠㅠ
답변을 작성해보세요.
답변 2