javascript - TypeError : props. render is not a function (React hook form)

Question

我以我用 react-hook-form 制作的这种形式将方法作为 Prop 传递。
当从 react-hook-form 添加 Controller 时，它给了我(TypeError:props.render 不是函数)。我在网上找不到任何解决方案，因此不胜感激。

import { useForm, FormProvider } from 'react-hook-form';
import FormInput from './CustomTextField';

const AddressForm = () => {
  const methods = useForm();

  return (
    <>
      
      <FormProvider {...methods}>
        <form onSubmit=' '>
          <Grid container spacing={3}>
            <FormInput required name='firstName' label='First name' />
          </Grid>
        </form>
      </FormProvider>
    </>
  );
};

import { useFormContext, Controller } from 'react-hook-form';


const FormInput = ({ name, label, required }) => {
  const { control } = useFormContext();
  

  return (
    <>
      <Controller
        as={TextField}
        name={name}
        control={control}
        label={label}
        fullWidth
        required={required}
        
      />
    <>
  );
};

export default FormInput;

Answer 1

陷入了类似的问题，
您可以尝试在 中进行以下更改表单输入 功能:

import React from 'react';
import { TextField, Grid } from '@material-ui/core';
import { useFormContext, Controller } from 'react-hook-form';


const FormInput = ({ name, label, required}) => {
const { control } = useFormContext();
   const isError = false;

return (
   <>
         <Controller
            control={control}
            name={name}
            render = {({ field})=> (
                <TextField
                    fullWidth
                    label={label}
                    required
                />
            )}
         />
   </>
 );
 }

export default FormInput;

希望这有帮助，否则你可以通过 docs