使用Formik与CKEditor调用POST API遇问题，求解决方案

你的核心问题是CKEditor的内容没有同步到Formik的表单状态中，导致提交时content字段为空。解决关键是利用Formik提供的setFieldValue方法，将编辑器内容同步到Formik的content字段，同时实现双向绑定。

修改步骤： #

• 获取Formik状态更新方法：通过Formik组件的render props拿到setFieldValue和表单当前的values
• 绑定CKEditor与Formik状态：
  1. 给CKEditor设置data属性，值为Formik的values.content，确保编辑器初始值和表单状态一致
  2. 在CKEditor的onChange事件中调用setFieldValue('content', data)，将编辑器内容同步到表单状态

修改后的完整代码： #

import React, { useState } from 'react';
import toastr from 'toastr';
import blogSchema from './blogSchema';
import DisplayImage from './DisplayImage';
import blogService from '../../services/blogService';
import { Formik, Form, Field } from 'formik';
import debug from 'sabio-debug';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const _logger = debug.extend("BlogsFormAddEdit");

function BlogsFormAddEdit() {

  const [addEditFormData] = useState({
    authorId: "",
    title: "",
    content: "",
  });

  const handleSubmit = (values) => {
    _logger(values);
    blogService
      .getAddBlog(values)
      .then(onAddSuccess)
      .catch(onAddError)
  }

  const onAddSuccess = (response) => {
    _logger(response);
    toastr.success("Your blog has posted", "Adding Success")
  }

  const onAddError = (err) => {
    _logger(err);
    toastr.error("Your blog failed to post", "Adding Failure")
  }

  return (
    <React.Fragment>
      <Formik
        enableReinitialize={true}
        initialValues={addEditFormData}
        validationSchema={blogSchema}
        onSubmit={handleSubmit}
      >
        {/* 通过render props获取Formik的setFieldValue和values */}
        {({ setFieldValue, values }) => (
          <Form>
            <div className="form-group">
              <h1>Blog Add/Edit Form</h1>
              <label htmlFor="authorId">Author Id</label>
              <Field type="text" name="authorId" className="form-control" />
            </div>

            <div className="form-group">
              <label htmlFor="title">Title</label>
              <Field type="text" name="title" className="form-control" />
            </div>

            <div className="form-group">
              <label htmlFor="content">Content</label>
              <CKEditor
                editor={ClassicEditor}
                // 设置编辑器初始值为Formik的content字段
                data={values.content}
                onChange={(event, editor) => {
                  const data = editor.getData();
                  _logger({ event, editor, data });
                  // 将编辑器内容同步到Formik的content字段
                  setFieldValue('content', data);
                }}
              />
            </div>
            <button type="submit" className='btn btn-primary'>Submit</button>
          </Form>
        )}
      </Formik>
      <DisplayImage />
      {/* 修复img标签错误：src不能直接传入对象，需改为对应图片字段（示例用imageUrl，可根据实际调整） */}
      <img alt="" src={addEditFormData.imageUrl || ''} />
    </React.Fragment>
  )
}

export default BlogsFormAddEdit;

额外说明： #

• 代码修复了底部img标签的错误，src属性不能直接传入整个addEditFormData对象，需替换为实际的图片字段
• enableReinitialize={true}确保当initialValues变化时，Formik会重新初始化表单状态，适配博客编辑场景

内容的提问来源于stack exchange，提问作者Soe1234