Блог

Главная - Вопросы по программированию - Ошибка окончательной формы React: необходимо указать либо реквизит для рендеринга

Ошибка окончательной формы React: необходимо указать либо реквизит для рендеринга

#javascript #reactjs #typescript #react-final-form #fluent-ui

#javascript #reactjs #typescript #react-final-form #fluent-ui

Вопрос:

Я пытаюсь создать простую форму с помощью 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

Кстати, фреймворк пользовательского интерфейса свободно-пользовательский интерфейс Может кто-нибудь мне помочь? Спасибо!!

Ответ №1:

Вы <Form> должны быть вторым <form> .

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

Комментарии:

1. Спасибо за ваш ответ, но после этого у меня будет 2 поля ввода для каждого поля, я думаю, что одно из <input>, а другое из <Textfield> , вы знаете, как это решить?

2. Вы должны передать {...input} в TextField и удалить <input> .

Ответ №2:

Для всех, кто может столкнуться с этим неопределенным сообщением об ошибке, проблема заключается в том, что что-то пошло не так в функции рендеринга <Form> .

Для OP он использовал неправильный тег формы внутри <Form> . Для меня это было свойство с ошибкой в компоненте <Field> (components={MyComponent} , упс).

Поскольку ошибка может быть вызвана любым количеством причин, и сообщение было не очень конкретным, можно получить представление о том, в чем может быть проблема, с помощью отладчика браузера, в моем случае это выглядело так:

трассировка стека браузера