Question

每次我点击此表单上的保存按钮时，都会引发此错误。博客错误的handleSubmit类型错误：_this4.props.handleSuccessfullFormSubmission不是函数在blog-submission-form.js：129 我知道这是一个范围错误，但我似乎无法弄清楚。这是代码。

blog-submission-form.js

import React, {Component} from 'react';
import axios from 'axios';
import DropzoneComponent from 'react-dropzone-component';
import RichTextEditor
  from '../Blog-User-Submissions/SubmissionForm/submit-rich-text-editor';
import '../../../style/blogFormSubmit.scss';
import '../../../style/rich-text-editor.scss';

export default class BlogSubmitForm extends Component {
  constructor (props) {
    super (props);

    this.state = {
      id: '',
      title: '',
      blog_status: '',
      content: '',
      featured_image: '',
      apiUrl: 'myapiurl',
      apiAction: 'post',
    };

    this.handleChange = this.handleChange.bind (this);
    this.handleSubmit = this.handleSubmit.bind (this);
    this.handleRichTextEditorChange = this.handleRichTextEditorChange.bind (
      this
    );

    this.componentConfig = this.componentConfig.bind (this);
    this.djsConfig = this.djsConfig.bind (this);
    this.handleFeaturedImageDrop = this.handleFeaturedImageDrop.bind (this);
    this.deleteImage = this.deleteImage.bind (this);
    this.featuredImageRef = React.createRef ();
  }

  deleteImage (imageType) {
    axios
      .delete (
        `myapiurl}?image_type=${imageType}`,
        {withCredentials: true}
      )
      .then (response => {
        this.props.handleFeaturedImageDelete ();
      })
      .catch (error => {
        console.log ('deleteImage error', error);
      });
  }

  componentWillMount () {
    if (this.props.editMode) {
      this.setState ({
        id: this.props.blog.id,
        title: this.props.blog.title,
        blog_status: this.props.blog.blog_status,
        content: this.props.blog.content,
        apiUrl: `myapiurl`,
        apiAction: 'patch',
      });
    }
  }

  componentConfig () {
    return {
      iconFiletypes: ['.jpg', '.png'],
      showFiletypeIcon: true,
      postUrl: 'https://httpbin.org/post',
    };
  }

  djsConfig () {
    return {
      addRemoveLinks: true,
      maxFiles: 1,
    };
  }

  handleFeaturedImageDrop () {
    return {
      addedfile: file => this.setState ({featured_image: file}),
    };
  }

  handleRichTextEditorChange (content) {
    this.setState ({content});
  }

  buildForm () {
    let formData = new FormData ();

    formData.append ('portfolio_blog[title]', this.state.title);
    formData.append ('portfolio_blog[blog_status]', this.state.blog_status);
    formData.append ('portfolio_blog[content]', this.state.content);

    if (this.state.featured_image) {
      formData.append (
        'portfolio_blog[featured_image]',
        this.state.featured_image
      );
    }

    return formData;
  }

  handleSubmit (event) {
    axios ({
      method: this.state.apiAction,
      url: this.state.apiUrl,
      data: this.buildForm (),
      withCredentials: true,
    })
      .then (response => {
        if (this.state.featured_image) {
          this.featuredImageRef.current.dropzone.removeAllFiles ();
        }

        this.setState ({
          title: '',
          blog_status: '',
          content: '',
          featured_image: '',
        });

        if (this.props.editMode) {
          // Update blog detail //HERE IS WHERE THE ERROR IS

          this.props.handleUpdateFormSubmission (response.data.portfolio_blog);
        } else {
          this.props.handleSuccessfullFormSubmission (
            response.data.portfolio_blog
          );
        }
      })
      .catch (error => {
        console.log ('handleSubmit for blog error', error);
      });

    event.preventDefault ();
  }

  handleChange (event) {
    this.setState ({
      [event.target.name]: event.target.value,
    });
  }

  render () {
    return (
      <form onSubmit={this.handleSubmit} className="blog-form-wrapper">
        <div className="two-column">
          <input
            type="text"
            onChange={this.handleChange}
            name="title"
            placeholder="Blog Title"
            value={this.state.title}
          />

          <input
            type="text"
            onChange={this.handleChange}
            name="blog_status"
            placeholder="Blog status"
            value={this.state.blog_status}
          />
        </div>

        <div className="one-column">
          <RichTextEditor
            handleRichTextEditorChange={this.handleRichTextEditorChange}
            editMode={this.props.editMode}
            contentToEdit={
              this.props.editMode && this.props.blog.content
                ? this.props.blog.content
                : null
            }
          />
        </div>

        <div className="image-uploaders">
          {this.props.editMode && this.props.blog.featured_image_url
            ? <div className="portfolio-manager-image-wrapper">
                <img src={this.props.blog.featured_image_url} />

                <div className="image-removal-link">
                  <a onClick={() => this.deleteImage ('featured_image')}>
                    Remove file
                  </a>
                </div>
              </div>
            : <DropzoneComponent
                ref={this.featuredImageRef}
                config={this.componentConfig ()}
                djsConfig={this.djsConfig ()}
                eventHandlers={this.handleFeaturedImageDrop ()}
              >
                <div className="dz-message">Featured Image</div>
              </DropzoneComponent>}
        </div>

        <button className="save-button">Save</button>
      </form>
    );
  }
}

这是在其中声明handleSuccessfullFormSubmission的文件。

BlogSubmitModal.js

import React, {Component} from 'react';
import ReactModal from 'react-modal';
import BlogSubmitForm from './blog-submission-form';
import '../../../style/blogsubmitmodal.scss';
import '../../../style/react-draft-wysiwyg.scss';

ReactModal.setAppElement ('.app-wrapper');

export default class BlogSubmitModal extends Component {
  constructor (props) {
    super (props);

    this.customStyles = {
      content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        marginRight: '50%',
        transform: 'translate(-50%, -50%',
      },
      overlay: {
        backgroundColor: 'rgba(1, 1, 1, 0.75)',
      },
    };

    this.handleSuccessfullFormSubmission = this.handleSuccessfullFormSubmission.bind (
      this
    );
    this.componentWillUnmount = this.componentWillUnmount.bind (this);
  }

  componentWillUnmount (BlogSubmitModal) {
    this.setState = {
      HamburgerMenu: '',
    };
  }

  handleSuccessfullFormSubmission (blog) {
    this.props.handleSuccessfulNewBlogSubmission (blog);
  }

  render () {
    return (
      <ReactModal
        style={this.customStyles}
        onRequestClose={() => {
          this.props.handleModalClose ();
        }}
        isOpen={this.props.modalIsOpen}
      >
        <BlogSubmitForm
          handleSuccessfullFormSubmission={this.handleSuccessfullFormSubmission}
        />
      </ReactModal>
    );
  }
}

这是在其中声明handleSuccessfulNewBlogSubmission的文件。 BlogSubmissions.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Header from '../../Headerbbg/Header';
import '../../../style/blog-submission.scss';
import BlogFormSubmit from './blog-submission-form';
import BlogSubmitModal from './blog-submit-modal';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
class BlogSubmissions extends Component {
  constructor () {
    super ();

    this.state = {
      blogModalIsOpen: false,
    };
    this.handleModalClose = this.handleModalClose.bind (this);
    this.handleSuccessfulNewBlogSubmission = this.handleSuccessfulNewBlogSubmission.bind (
      this
    );
  }
  handleSuccessfulNewBlogSubmission (blog) {
    this.setState ({
      blogModalIsOpen: false,
      blogItems: [blog].concat (this.state.blogItems),
    });
  }

  handleModalClose () {
    this.setState ({
      blogModalIsOpen: false,
    });
  }
  render () {
    return (
      <div>
        <Header />
        <h2 className="blogsubmissiontitle">Blog Submission</h2>
        <h3 className="directions">
          Once you have submitted your entry it will be reviewed and posted if it meets the terms and conditions.
          {' '}
          If it does not you will be sent an email and be asked to revise.{' '}
        </h3>
        <h4 className="rulestitle">Rules</h4>
        <li className="rules">
          <ol>
            1.) Please avoid using profanity; anything full of profanity will be rejected.
          </ol>

          <ol>
            2.) Be sure to tell the full story so accurate advice can be suggested.
          </ol>

          <ol>
            3.) Be prepared to hear the truth when advice is offered and don't let it hurt your feelings.
          </ol>

          <ol>
            4.) When giving advice please think logically and give productive advice.

          </ol>

          <ol>
            5.) Be honest but also think about how you would feel in the same situation and try to be nice.
          </ol>
        </li>

        <BlogFormSubmit
          handleSuccessfulNewBlogSubmission={
            this.handleSuccessfulNewBlogSubmission
          }
          handleModalClose={this.handleModalClose}
          modalIsOpen={this.state.blogModalIsOpen}
        />

      </div>
    );
  }
}

export default BlogSubmissions;

任何帮助将不胜感激。我已经待了三天了，我知道这很简单，但是我似乎无法弄清楚。我是newb，所以我知道代码有点逊色。谢谢。

Answer 1

在BlogSubmissions中，您呈现不带handleSuccessfullFormSubmission的BlogFormSubmit：

<BlogFormSubmit
          handleSuccessfulNewBlogSubmission={
            this.handleSuccessfulNewBlogSubmission
          }
          handleModalClose={this.handleModalClose}
          modalIsOpen={this.state.blogModalIsOpen}
        />

然后BlogSubmitForm调用：

this.props.handleSuccessfullFormSubmission

不存在

Answer 2

您的导入错误
你应该做的就是改变

import BlogFormSubmit from "./blog-submission-form";
// to
import BlogFormSubmit from "./BlogSubmitModal";

，以便Blog-submission-form的父级是BlogSubmitModal，而不是BlogSubmissions。

我不断收到错误消息，指出这不是功能

2 个答案: