Reactjs 将useFormik（）与<；字段/>；获取错误：formik.getFieldProps不是函数

嘿，我对formik库是新手，我正在尝试将react draft wysiwyg组件用于formik。这是我的密码

RichTextEditor.js

import React, { useState } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import { useField } from "formik";

const RichTextEditor = (props) => {
  const [field, meta, helpers] = useField(props);

  const { value } = meta;
  const { setValue } = helpers;

  const prepareDraft = (value) => {
    const draft = htmlToDraft(value);
    const contentState = ContentState.createFromBlockArray(draft.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return editorState;
  };

  const [editorState, setEditorState] = useState(
    value ? prepareDraft(value) : EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState) => {
    const forFormik = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    );
    setValue(forFormik);
    setEditorState(editorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        {...props}
        {...field}
      />
    </div>
  );
};

export default RichTextEditor;

import React from "react";
import { Row, Col, Card, Form, Input } from "antd";
import { useFormik, Field } from "formik";
import RichTextEditor from "../RichTextEditor/RichTextEditor";

const initialValues = {
  title: "",
  body: "",
};
export default function AddContent() {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Row>
      <Col span={19}>
        <Card>
          <>
            <h1>
              {formik.values.title ? formik.values.title : "Content Title"}
            </h1>

            <Form onSubmit={formik.handleSubmit}>
              <Input
                id="title"
                name="title"
                placeholder="Content Title"
                onChange={formik.handleChange}
                value={formik.values.email}
              />

              <Field
                name="body"
                component={RichTextEditor}
                value={formik.values.body}
                onChange={formik.handleChange}
                // {...formik.getFieldProps("body")}
              />
            </Form>
          </>
        </Card>
      </Col>
      <Col span={5}></Col>
    </Row>
  );
}

// add FormikProvider
import { useFormik, Field, FormikProvider } from "formik";

const formik = useFormik({
  initialValues,
  onSubmit: (values) => {...},
});

// wrap with FormikProvider
return (
  <FormikProvider value={formik}>
    <Row>...your-code...</Row>
  </FormikProvider>
)

但我有以下错误

TypeError: formik.getFieldProps is not a function
Field
src/Field.tsx:181

  178 |     unregisterField(name);
  179 |   };
  180 | }, [registerField, unregisterField, name, validate]);
> 181 | const field = formik.getFieldProps({ name, ...props });
      | ^  182 | const meta = formik.getFieldMeta(name);
  183 | const legacyBag = { field, form: formik };
  184 | 

---

我也遇到了同样的问题，并通过以下修复方法进行了修复。
简而言之，使用FormikProvider在渲染内部进行包裹

AddPost.js

import React, { useState } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import { useField } from "formik";

const RichTextEditor = (props) => {
  const [field, meta, helpers] = useField(props);

  const { value } = meta;
  const { setValue } = helpers;

  const prepareDraft = (value) => {
    const draft = htmlToDraft(value);
    const contentState = ContentState.createFromBlockArray(draft.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return editorState;
  };

  const [editorState, setEditorState] = useState(
    value ? prepareDraft(value) : EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState) => {
    const forFormik = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    );
    setValue(forFormik);
    setEditorState(editorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        {...props}
        {...field}
      />
    </div>
  );
};

export default RichTextEditor;

import React from "react";
import { Row, Col, Card, Form, Input } from "antd";
import { useFormik, Field } from "formik";
import RichTextEditor from "../RichTextEditor/RichTextEditor";

const initialValues = {
  title: "",
  body: "",
};
export default function AddContent() {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Row>
      <Col span={19}>
        <Card>
          <>
            <h1>
              {formik.values.title ? formik.values.title : "Content Title"}
            </h1>

            <Form onSubmit={formik.handleSubmit}>
              <Input
                id="title"
                name="title"
                placeholder="Content Title"
                onChange={formik.handleChange}
                value={formik.values.email}
              />

              <Field
                name="body"
                component={RichTextEditor}
                value={formik.values.body}
                onChange={formik.handleChange}
                // {...formik.getFieldProps("body")}
              />
            </Form>
          </>
        </Card>
      </Col>
      <Col span={5}></Col>
    </Row>
  );
}

// add FormikProvider
import { useFormik, Field, FormikProvider } from "formik";

const formik = useFormik({
  initialValues,
  onSubmit: (values) => {...},
});

// wrap with FormikProvider
return (
  <FormikProvider value={formik}>
    <Row>...your-code...</Row>
  </FormikProvider>
)

//添加FormikProvider
从“formik”导入{useFormik，Field，FormikProvider}；
常数formik=useFormik({
初始值，
onSubmit：（值）=>{…}，
});
//用成形器包裹
返回(
…你的代码。。。
)

出现此错误是因为您在formik提供的

Field

组件上使用了

getFieldProps（）

函数，而不是在正常组件（如

Input

）上，两者的工作方式不同

你应该这样使用它

<Form onSubmit={formik.handleSubmit}>
    <Input
       id="title"
       placeholder="Content Title"
       {...formik.getFieldProps("title")}
     />

    <Input
       component={RichTextEditor}
       {...formik.getFieldProps("body")}
    />
</Form>

有关getFieldProps（）的更多信息