(질문) 블로그 프로젝트 [21.1 포스트 작성] p562~567

[PlayKaris]

안녕하세요 velopert님!

해당 페이지 작업 후
[뒤로가기], [작성하기] 버튼을 클릭하면 페이지가 전환이 되지 않아서 보니

Expected onClick listener to be a function, instead got a value of object type.

위와 같은 에러가 발생되고 있습니다.

작업한 코드를 비교해봐도 다른점이 없는 것 같은데
이런 경우에는 어떻게 해결할 수 있을까요?

좋은 책 만들어주셔서 감사합니다 :)

src\containers\editor\EditorHeaderContainer.js

import React, { Component } from 'react';
import EditorHeader from 'components/editor/EditorHeader';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';

import * as editorActions from 'store/modules/editor';

class EditorHeaderContainer extends Component {

    componentDidMount() {
        const { EditorActions } = this.props;
        EditorActions.initialize(); // 에디터를 초기화합니다.
    }

    handleGoBack = () => {        
        const { history } = this.props;
        history.goBack();
    }

    handleSubmit = async () => {        
        const { title, markdown, tags, EditorActions, history } = this.props;
        const post = {
            title,
            body: markdown,
            // 태그 텍스트를 ,로 분리시키고 앞뒤 공백을 지운 후 중복되는 값을 제거
            tags: tags === "" ? [] : [...new Set(tags.split(',').map(tag => tag.trim()))]
        };
        try {            
            await EditorActions.writePost(post);
            // 페이지를 이동시킵니다. 주의: postId는 위쪽에서 레퍼런스를 만들지 않고
            // 이 자리에서 this.props.postId를 조회해야 합니다(현재 값을 불러오기 위함)
            history.push(`/post/${this.props.postId}`);
        } catch(e) {            
            console.log(e);
        }
    }

    render() {
        const { handleGoBack, handleSubmit } = this;

        return(
            <EditorHeader
                onGoBack={handleGoBack}
                onSubmit={handleSubmit}
            />
        );
    }
}

export default connect(
    (state) => ({
        title: state.editor.get('title'),
        markdown: state.editor.get('markdown'),
        tags: state.editor.get('tags'),
        postId: state.editor.get('postId')
    }),
    (dispatch) => ({
        EditorActions: bindActionCreators(editorActions, dispatch)
    })
)(withRouter(EditorHeaderContainer));

src\components\editor\EditorHeader\EditorHeader.js

import React from 'react';
import styles from './EditorHeader.scss';
import classNames from 'classnames/bind';
import Button from 'components/common/Button';

const cx = classNames.bind(styles);

const EditorHeader = (onGoBack,onSubmit) => {
  return (
    <div className={cx('editor-header')}>
      <div className={cx('back')}>
        <Button onClick={onGoBack} theme="outline">뒤로가기</Button>        
      </div>
      <div className={cx('submit')}>
        <Button onClick={onSubmit} theme="outline">작성하기</Button>
      </div>
    </div>
  );
};

export default EditorHeader;

[PlayKaris]

아.. 잘못된 곳 찾아서 수정했습니다
정상작동되네요👍
const EditorHeader = (onGoBack,onSubmit) => const EditorHeader = ({onGoBack,onSubmit})