С помощью Компонент из Material-UI с формой реагирующего крючка показывает предупреждение

Question

Я использую форму реакции-ловушки для управления состоянием формы в моем приложении. Когда я использую <Input /> в качестве элемента управления, он работает как положено, однако с <TextField /> он показывает предупреждение, говорящее: «Компонент изменяет неконтролируемый ввод текста типа для управления». Что здесь не так? Есть ли альтернатива для этого компонента?

Вот мой код реакции:

import React from "react";
import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import Joi from "@hapi/joi";
import { TextField, createMuiTheme, ThemeProvider } from "@material-ui/core";

const validationSchema = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required()
});

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

const resolver = (data, validationContext) => {
  const { error, value: values } = validationSchema.validate(data, {
    abortEarly: false
  });

  return {
    values: error ? {} : values,
    errors: error
      ? error.details.reduce((previous, currentError) => {
          return {
            ...previous,
            [currentError.path[0]]: currentError
          };
        }, {})
      : {}
  };
};

export default function App() {
  const { register, handleSubmit, errors, control } = useForm({
    validationResolver: resolver,
    validationContext: { test: "test" }
  });

  console.log("error", errors);

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>

        <form onSubmit={handleSubmit(d => console.log(d))}>
          <label>Username</label>
          <Controller as={<input />} name="username" control={control} />
          <Controller
            as={<TextField />}
            name="firstName"
            label="First Name"
            control={control}
          />
          <input type="submit" />
        </form>
      </div>
    </ThemeProvider>
  );
}

и вот ссылка на него в песочнице: https://codesandbox.io/s/react-hook-form-validationresolver-7k33n

Answer 1

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

 <Controller
  as={<input />}
  name="username"
  control={control}
  defaultValue=""
/>
<Controller
  as={<TextField />}
  name="firstName"
  label="First Name"
  control={control}
  defaultValue=""
/>