글 작성이 안 되는 오류

[리뉴얼] React로 NodeBird SNS 만들기

더미데이터와 포스트폼 만들기

해결된 질문

작성

595

컴파일은 오류 없이 잘 되는데, 폼에서 짹짹(게시)버튼을 눌러도 글 작성이 되지 않습니다

스크린샷 2023-11-01 001853.png

개발자도구에서 나타나는 오류입니

스크린샷 2023-11-01 003610.png

Incorrect use of <label for=FORM_ELEMENT>
1. The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
  To fix this issue, make sure the label's for attribute references the correct id of a form field.

PostCard가 작성되지 않는데 코드에서 오류를 못 찾겠어서 질문합니다! 의심스러운 부분들만 올려봅니다..

post.js 코드입니다

const ADD_POST = 'ADD_POST';
export const addPost = {
    type: ADD_POST
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_POST: {
            return {
                ...state,
                mainPosts: [dummyPost, ...state.mainPosts],
                postAdded: true,
            };
        };
        default: {
            return {
                ...state,
            };
        };
    }
};

PostForm.js 코드입니다

const PostForm = () => {
    const { imagePaths } = useSelector((state) => state.post);
    const dispatch = useDispatch();
    const imageInput = useRef();
    const [text, setText] = useState('');
    const onChangeText = useCallback((e) => {
        setText(e.target.value);
    }, []);

    const onSubmit = useCallback(() => {
        dispatch(addPost);
        setText('')
    }, []);

    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) => (
                    <div key={v} style={{ display: 'inline-block' }}>
                        <img scr={v} style={{ width: '200px' }} alt={v} />
                        <div>
                            <Button>제거</Button>
                        </div>
                    </div>
                ))}
            </div>
        </Form>
    )
};

pages/index.js 코드입니다

const Home = () => {
    const { isLoggedIn } = useSelector((state) => state.user);
    const { mainPosts } = useSelector((state) => state.post);

    return (
        <AppLayout>
            {isLoggedIn && <PostForm />}
            {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}
        </AppLayout>
    );

react redux node.js express next.js

답변 1

제로초(조현영)

지식공유자

dummyPost 코드가 없네요?

sscapstondesign3

질문자

post.js에 작성했습니다만 글 작성이 아직 안됩니다ㅠㅜ

const ADD_POST = 'ADD_POST';
export const addPost = {
    type: ADD_POST
}

const dummyPost = {
    id: 2,
    content: '더미데이터',
    User: {
        id: 1,
        nickname: 'ㅇUㅈ'
    },
    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;

제로초(조현영)

지식공유자

이렇게 수정하고 나면 뭔가 바뀐 게 있지 않나요? 리덕스 데브툴즈나 콘솔이나요.

sscapstondesign3

질문자

그게 사실은 dummyPost 코드를 새로 작성한 것은 아니고 질문글에 안 올렸던거라 달라진게 없는 것 같습니다!

조금 의심가는건

데브툴즈에서 States를 보면