인프런 커뮤니티 질문&답변

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

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

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;