NextJS集成Draft.js+Formik报错：editorState.getCurrentContent不是函数

I see you're hitting this frustrating error when trying to integrate Draft.js with Formik in your Next.js project. Let's break down what's going wrong and fix it step by step:

Root Cause of the Error #

The main issue is in how your RichEditorExample component is passing the editor state back to Formik. Right now, you're calling this.props.onChange("editorState", editorState) with two arguments, but your parent ArticleForm expects only the EditorState object. This is causing Formik's content field to be set to the string "editorState" instead of a valid EditorState instance—hence the error when you try to call getCurrentContent() on a string.

Step 1: Fix the Editor State Propagation #

First, update the onChange method in RichEditorExample.js to pass only the EditorState to the parent component:

// RichEditorExample.js
onChange = editorState => {
  // Remove the unnecessary raw content conversion—we don't need it here
  this.props.onChange(editorState); // Pass only the EditorState instance
};

Step 2: Adjust Formik Validation for EditorState #

Your original validation schema treats content as a string, but it's actually an EditorState object. We need to create custom validation rules that check the plain text content of the editor:

// Article.js
const validationSchema = Yup.object({
  title: Yup.string()
    .min(3, "Title must be more than 3 characters!")
    .max(20, "Title can't have more than 20 characters"),
  content: Yup.mixed()
    .required("Content is required")
    .test(
      'min-length',
      "Content must be more than 3 characters!",
      (value) => {
        if (!value) return false;
        // Get plain text content from EditorState to check length
        const plainText = value.getCurrentContent().getPlainText();
        return plainText.length > 3;
      }
    )
    .test(
      'max-length',
      "Content can't have more than 20 characters!",
      (value) => {
        if (!value) return true;
        const plainText = value.getCurrentContent().getPlainText();
        return plainText.length <= 20;
      }
    )
})

Step 3: Small Fix for ArticleForm.js #

Make sure you import React at the top of ArticleForm.js (you're using React.Fragment without importing React, which will throw errors in Next.js):

// ArticleForm.js
import React from 'react'; // Add this line
import { Form } from 'formik'
import dynamic from 'next/dynamic'
import {Editor} from 'draft-js';
import { RichEditorExample } from '../../helpers/RichEditor';
// ... rest of your imports

Why This Works #

• By fixing the onChange prop in RichEditorExample, we ensure Formik's content field always holds a valid EditorState instance.
• The custom validation rules now properly check the actual content length from the EditorState instead of trying to validate an object as a string.

After making these changes, your handleSubmit function should correctly call values.content.getCurrentContent() and convert it to HTML without errors.

内容的提问来源于stack exchange，提问作者Mirnes Halilović