将useFormik()与<Field />一起使用会得到错误：formik.getFieldProps不是一个函数

Question

嘿，我是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;

和AddPost.js

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>
);
}

但我得到以下错误

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 | 

Answer 1

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

AddPost.js

// 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>
)

Answer 2

出现此错误是因为您在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((的更多信息；

https://formik.org/docs/tutorial#getfieldprops