-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
글쓴게 안올라가요.. 글등록은됩니다
21.12.21 23:35 작성 조회수 181
0
post form
우선 포스관련에서 코드올립니다 . ㅠㅠ 잘따라하고 글만 안써지는 문제가 생겨서
ㅅ콘솔로그 찍어보니 onChange 는 잘먹히는 상황인데
서서브밋시 포스트 등록은되나 글은 업로드가 되지 않습니다 .. 문제가 무엇인지
모모르겠습니다.
import React, { useRef, useCallback, useState, useEffect } from "react";
import { Form, Input, Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { addPost } from "../reducer/post";
const PostForm = () => {
const { imagePaths, postAdded } = useSelector((state) => state.post);
const [text, setText] = useState("");
const dispatch = useDispatch();
const imageInput = useRef();
const onClickImageUpload = useCallback(() => {
imageInput.current.click();
}, [imageInput.current]);
useEffect(() => {
if (postAdded) {
setText("");
}
}, [postAdded]);
const onChangeText = useCallback((e) => {
setText(e.target.value);
}, []);
const onSubmit = useCallback(() => {
dispatch(addPost);
}, []);
return (
<Form
style={{ margin: "10px 0 20px" }}
encType="multipart/form-data"
onFinish={onSubmit}
>
<Input.TextArea
value={text}
onChange={onChangeText}
maxLength={140}
placeholder="어떤 신기한 일이 있었나요?"
/>
<div>
<input type="file" multiple hidden ref={imageInput} />
<Button onClick={onClickImageUpload}>이미지 업로드</Button>
<Button type="primary" style={{ float: "right" }} htmlType="submit">
짹짹
</Button>
</div>
<div>
{imagePaths.map((v) => {
return (
<div key={v} style={{ display: "inline-block" }}>
<img alt={v} />
<div>
<Button>제거</Button>
</div>
</div>
);
})}
</div>
</Form>
);
};
export default PostForm;
post reducer
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: [],
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_POST: {
return {
...state,
mainPosts: [dummyPost, ...state.mainPosts],
postAdded: true,
};
}
default: {
return {
...state,
};
}
}
};
export default reducer;
postcard
import { Card, Button, Avatar, Popover, List, Comment } from "antd";
import { Content } from "antd/lib/layout/layout";
import PropTypes from "prop-types";
import React from "react";
import {
RetweetOutlined,
HeartTwoTone,
HeartOutlined,
MessageOutlined,
EllipsisOutlined,
} from "@ant-design/icons";
import { useSelector } from "react-redux";
import PostImages from "./PostImages";
const PostCard = ({ post }) => {
const { me } = useSelector((state) => state.user);
const id = me?.id;
return (
<div>
<Card
cover={post.Images[0] && <PostImages images={post.Images} />}
actions={[
<RetweetOutlined key="retweet" />,
<HeartOutlined key="heart" />,
<MessageOutlined key="message" />,
<Popover
key="more"
content={
<Button.Group>
{id && post.User.id === id ? (
<>
<Button>수정</Button>
<Button type="danger">삭제</Button>
</>
) : (
<Button>신고</Button>
)}
</Button.Group>
}
>
<EllipsisOutlined />
</Popover>,
]}
>
<Card.Meta
avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
title={post.User.nickname}
/>
{/* <Image /> */}
<Content />
</Card>
{/* <CommentForm /> */}
{/* <Comments /> */}
</div>
);
};
PostCard.propTypes = {
post: PropTypes.shape({
id: PropTypes.number,
User: PropTypes.object,
content: PropTypes.string,
createdAt: PropTypes.object,
Comments: PropTypes.arrayOf(PropTypes.any),
Images: PropTypes.arrayOf(PropTypes.any),
}),
};
export default PostCard;
답변을 작성해보세요.
2
답변 1