将Slate接入Formik是否使用useField？编辑内容无法同步到Formik值求助

问题根因 #

useField 返回的 field 对象是只读的，直接修改 field.value 无法触发 Formik 的状态更新，必须通过 Formik 暴露的状态更新方法才能把值同步到 Formik 的全局 values 中。

修复后的组件代码 #

import React, { useMemo, useState, useEffect } from "react";
import { useField } from "formik";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";

const FormRichText = ({ label, ...props }) => {
  // 取helpers对象，包含setValue方法用于更新Formik字段值
  const [field, meta, helpers] = useField(props);
  const editor = useMemo(() => withReact(createEditor()), []);
  const [editorContent, setEditorContent] = useState(field.value);

  // 监听Formik侧的字段值变化，适配表单重置、回显场景
  useEffect(() => {
    if (JSON.stringify(field.value) !== JSON.stringify(editorContent)) {
      setEditorContent(field.value);
    }
  }, [field.value]);

  return (
        <Slate
          editor={editor}
          value={editorContent}
          onChange={(newVal) => {
            setEditorContent(newVal);
            // 同步最新值到Formik
            helpers.setValue(newVal);
          }}
        >
          <Editable />
        </Slate>
  );
};

export default FormRichText;

核心修改点 #

• 从 useField 的返回值中取出 helpers 对象，调用其中的 setValue 方法主动通知 Formik 更新字段值，这是 Formik 自定义组件同步值的标准实现方式
• 移除了原代码中 Slate 组件上硬编码的 name="transcript" 属性，避免覆盖外部传入的 name 参数，支持组件在多个不同字段场景下复用
• 补全了 slate 包的 createEditor 导入，解决原代码的运行报错问题
• 新增 useEffect 监听 Formik 侧的字段值变化，保证表单重置、后端数据回显等场景下，编辑器内容和 Formik 全局状态保持同步

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