-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
게시글 작성도 안됩니다..
22.03.15 12:11 작성 조회수 127
1
게시글 작성하려고 하면 서버 콘솔이나 브러우저 콘솔창에 아무 에러메시지도 안나오고
ADD_POST_REQUEST 액션만 보내지는데요 어떻게 해결해야 할까요...??
components > PostForm.js 에서 onSubmit 을 강의대로 따라쳐봐도 안되서 // 주석처리하고 github master브랜치 가서 그쪽 코드 넣어봐도 안되네요. 게시글이 안올라가요..
return alert('게시글을 작성하세요.');
여기 '게시글을 작성하세요.' 이 오류만 계속나오네요
답변을 작성해보세요.
1
Trendy Tube
질문자2022.03.15
PostForm.js 코드 올립니다 확인해주세요! 게시글을 달아도 요청만 가고, 댓글도 그렇구요, 이제는 닉네임도 요청만 가네요.
import React, { useCallback, useEffect, useRef } from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { ADD_POST_REQUEST, UPLOAD_IMAGES_REQUEST, REMOVE_IMAGE } from '../reducers/post';
import { addPost } from '../reducers/post';
import useInput from '../hooks/useInput';
const PostForm = () => {
const { imagePaths, addPostDone } = useSelector((state) => state.post);
const dispatch = useDispatch();
const { text, onChangeText, setText } = useInput(''); // 커스텀 훅 만들어놓은거 자주 활용하기!
useEffect(() => {
if (addPostDone) {
setText('');
}
}, [addPostDone]);
const onSubmit = useCallback(() => {
dispatch(addPost(text));
}, [text]);
// const onSubmit = useCallback(() => {
// if (!text || !text.trim()) {
// return alert('게시글을 작성하세요.');
// }
// const formData = new FormData();
// imagePaths.forEach((p) => {
// formData.append('image', p);
// });
// formData.append('content', text);
// return dispatch({
// type: ADD_POST_REQUEST,
// data: formData,
// });
// }, [text, imagePaths]);
const imageInput = useRef();
const onClickImageUpload = useCallback(() => {
imageInput.current.click();
}, [imageInput.current]);
const onChangeImages = useCallback((e) => {
console.log('images', e.target.files);
const imageFormData = new FormData();
[].forEach.call(e.target.files, (f) => {
imageFormData.append('image', f);
});
dispatch({
type: UPLOAD_IMAGES_REQUEST,
data: imageFormData,
});
}, []);
const onRemoveImage = useCallback((index) => () => {
dispatch({
type: REMOVE_IMAGE,
data: index,
});
}, []);
return (
<Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>
<Input.TextArea
value={text}
onChange={onChangeText}
maxLength={140}
placeholder='What happen?'
/>
<div>
<Input type="file" multiple hidden ref={imageInput} onChange={onChangeImages} />
<Button onClick={onClickImageUpload}>이미지 업로드</Button>
<Button type="primary" style={{ float: 'right' }} htmlType="submit">Add Story</Button>
</div>
<div>
{imagePaths.map((v, i) => (
<div key={v} style={{ display: 'inline-block' }}>
<img src={`http://localhost:3065/${v}`} style={{ width: '200px' }} alt={v} />
<div>
<Button onClick={onRemoveImage(i)}>제거</Button>
</div>
</div>
))}
</div>
</Form>
);
};
export default PostForm;
답변 1