控制器使用 react-hook-form 的问题

Question

这是我用于控制器的代码：

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

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

  return (
    <Grid item xs={12} sm={6}>
      <Controller
        as={TextField}
        name={name}
        control={control}
        label={label}
        fullWidth
        required={required}
      />
    </Grid>
  );
}

export default FormInput;

这里是我调用 FormInput 的地方：

import React from 'react'
import { InputLabel, Select, MenuItem, Button, Grid, Typography } from '@material-ui/core'
import { useForm, FormProvider } from 'react-hook-form'
import FormInput from './CustomTextField'

const AdressForm = () => {
    const methods = useForm()

    return (
        <>
            <Typography variant="h6" gutterBottom>Shippng Adress</Typography>
            <FormProvider {...methods}>
                <form onSubmit=''>
                    <Grid container spacing={3}>
                        <FormInput required name="firstName" label="First name" />
                      
                    </Grid>
                </form>
            </FormProvider>
        </>
    )
}

export default AdressForm

我得到这个错误：

"TypeError: props.render is not a function"

我正在尝试使用 react-hook-form 在 addressForm 中制作表单，但控制器出现问题。

Answer 1

根据文档，as 道具已在 react-hook-form v7 中删除，取而代之的是 render 道具。

文档：https://react-hook-form.com/api/usecontroller/controller

控制器使用 react-hook-form 的问题

Problem with the Controller using react-hook-form

reactjs

react-hooks

react-hook-form