反应最终形式错误：必须指定渲染道具

如何解决反应最终形式错误：必须指定渲染道具

我正在尝试使用 React-Final-Form 构建一个简单的表单，如下所示：

import * as React from "react";
import {
  PrimaryButton,} from "office-ui-fabric-react/lib/Button";
import { Form,Field } from "react-final-form";
import { FORM_ERROR } from "final-form";
import { IUserFormValues } from "../../models/user";
import { RootStoreContext } from "../../stores/rootStore";
import TextInputNew from "./TextInputNew";

const NewUIForm = () => {
  const rootStore = React.useContext(RootStoreContext);
  const { login } = rootStore.userStore;
  return (
    <Form
      onSubmit={(values: IUserFormValues) =>
        login(values).catch((error) => ({
          [FORM_ERROR]: error,}))
      }

      render={({
        handleSubmit,}) => (
        <Form onSubmit={handleSubmit}>
          <Field name="email" component={TextInputNew} />
          <Field name="email" component={TextInputNew} />
          <PrimaryButton type='submit' text="Save" />
        </Form>
      )}
    />
  );
};
export default NewUIForm;

TextInputNew 组件是这样的：

import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import { FieldRenderProps } from "react-final-form";

interface IProps extends FieldRenderProps<string,HTMLInputElement> {}

const TextInputNew: React.FC<IProps> = ({ input }) => {
  return (
    <div>
      <input {...input} />
      <TextField label="Standard" />
    </div>
  );
};
export default TextInputNew;

然后当我使用这个 NewUIForm 组件时出现这个错误

错误：必须为 ReactFinalForm 指定渲染道具、渲染函数或组件道具

顺便说一下，UI 框架是 Fluent-UI 谁能帮我？谢谢！！

解决方法

第二个 <Form> 应该是 <form>。

    <form onSubmit={handleSubmit}>
      <Field name="email" component={TextInputNew} />
      <Field name="email" component={TextInputNew} />
      <PrimaryButton type='submit' text="Save" />
    </form>

,

对于可能遇到此模糊错误消息的其他人来说，问题是

的渲染函数出了问题。

对于 OP，它在

中使用了错误的表单标签。 对我来说，它是 组件上的一个拼写错误的属性 (components={MyComponent}，哎呀）。

由于错误可能由多种原因引起并且消息不是很具体，因此可以通过浏览器调试器了解问题可能出在哪里，在我的情况下是这样的：

>