inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

게시글, 댓글 saga 작성하기

addPost 액션 관해서 문제 질문드립니다.

해결된 질문

423

hib4888

작성한 질문수 47

1

안녕하세요 제로초님 강의잘듣고있습니다.

강의를 들으면서 궁금한점이 있어서 질문드리겠습니다.

add_post_request액션에서 success로 넘어가지 않아서 

antd form onfinish함수 usecallback인자부분에 form의 데이터를 넣으려고하는데

정의되지 않은 데이터라고 해서 오류가 발생하는데 어떻게 해결할 수 있을까요?

그리고 제로초님과는 다르게 useState를 사용하지 않고 antd form만으로 실습을 진행하고 있는데 꼭 useState를 사용해서 form의 데이터를 전송해야하는걸까요?

form의 데이터는 문제없이 아래와 같이 출력이 잘됩니다.

 

import React, { useCallback } from 'react';
import { Button, Form, Input, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';

import { PostingFormWrapper, FormWrapper, FormHeader, HeaderText, HeaderBtn, HeaderDiviver, ImageUploaderWrapper, ContentFormWrapper, TagsInputWrapper } from './styles';
import { addPost } from '../../reducers/post';

const PostingForm = () => {
  const { addPostLoading } = useSelector((state) => state.post);
  const dispatch = useDispatch();
  const onSubmitForm = useCallback((value) => {
    console.log(value);
    dispatch(addPost(value));
  }, [value]);

  const normFile = useCallback((e) => {
    console.log('Upload event:', e);
  
    if (Array.isArray(e)) {
      return e;
    }
  
    return e?.fileList;
  }, []);

  return (
    <section>
      <PostingFormWrapper
        name="posting"
        onFinish={onSubmitForm}      
        scrollToFirstError
      >
        <FormWrapper style={{marginBottom: '1em'}}>
          <FormHeader>
            <HeaderText>Post Writing</HeaderText>
            <div>
              <HeaderBtn 
                type='primary' 
                size='large' 
                htmlType="submit"
                loading={addPostLoading}
              >
                등록
              </HeaderBtn>
              <Button size='large'>취소</Button>
            </div>
          </FormHeader>
          <HeaderDiviver />
        </FormWrapper>

        <FormWrapper
          name="title"
          rules={[
            {
              type: 'text',
            },
            {
              required: true,
              message: '포스팅 제목을 입력하세요.',
            },
          ]}
          hasFeedback
        >
          <Input placeholder='제목을 입력해 주세요.' allowClear="true" size='large' />
        </FormWrapper>

        <FormWrapper
          name="desc"
          rules={[
            {
              type: 'text',
            },            
          ]}          
        >
          <Input placeholder='포스팅의 간략한 설명을 입력해 주세요.' allowClear="true" size='large' />
        </FormWrapper>
        
        <ImageUploaderWrapper
          name="images"
          rules={[          
            {
              // required: true,
              // message: '조리사진을 첨부하세요.',
            },
          ]}
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload name="logo" action="/upload.do" listType="picture">
            <Button type='primary' size='large' icon={<UploadOutlined />}>Upload</Button>
          </Upload>
        </ImageUploaderWrapper>
        
        <ContentFormWrapper
          name="ingredient"
          rules={[
            {
              type: 'text',
            },
            {
              required: true,
              message: '재료를 입력하세요.',
            },
          ]}
          hasFeedback
        >
          <Input.TextArea 
            placeholder='재료를 입력하세요.' 
            size='large' 
            showCount
            maxLength={100}
            rows={5}
          />
        </ContentFormWrapper>

        <ContentFormWrapper
          name="recipes"
          rules={[
            {
              type: 'text',
            },
            {
              required: true,
              message: '요리방법을 입력하세요.',
            },
          ]}
          hasFeedback
        >
          <Input.TextArea 
            placeholder='요리방법을 입력하세요.' 
            size='large' 
            showCount
            maxLength={1000}
            rows={20}
          />
        </ContentFormWrapper>

        <ContentFormWrapper
          name="tips"
          rules={[
            {
              type: 'text',
            },          
          ]}        
        >
          <Input.TextArea 
            placeholder='Tip을 입력하세요.' 
            size='large' 
            showCount
            maxLength={200}
            rows={8}
          />
        </ContentFormWrapper>

        <Form.Item
          name="tags"
            rules={[
              {
                type: 'text',
              },            
            ]}          
          >
          <TagsInputWrapper placeholder='태그를 입력해 주세요.' size='large' />
          
        </Form.Item>        
      </PostingFormWrapper>    
    </section>    
  )
};

export default PostingForm;

Next.js redux react express nodejs

답변 1

0

제로초(조현영)

[value]에서 value를 빼세요. 스코프 생각하셔야 합니다. 그리고 value는 event객체일거에요.

0

hib4888

 바쁘신데 답변 정말 감사합니다.

기초적인 답변이였네요 죄송합니다 ㅜㅜ

 

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

199

1

특정 페이지 접근을 막고 싶을 때

0

117

2

createGlobalStyle의 위치와 영향범위

0

104

2

인라인 스타일 리렌더링 관련

0

98

2

vsc 에서 npm init 설치시 오류

0

159

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

164

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

218

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

393

1

sudo certbot --nginx 에러

0

1298

2

Minified React error 콘솔에러 (hydrate)

0

481

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

257

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

341

1

npm run build 에러

0

526

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

351

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

291

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

252

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

207

1