React-select & React-hook-form 控制器问题

Question

我正在尝试为 react-select 从 react-hook-forms 实施 register 但为了做到这一点，我需要使用 Controller 来自 react-hook-forms ] 但是当我使用 Controller 时，我的 Select Component 会被

炸毁

TypeError: methods is null

On useController.ts（包控制器文件本身）

我不知道为什么会收到此消息，在这一点上，如果能帮助我解决此问题，我将不胜感激。我花了几个小时调试和更改并寻找替代解决方案，但没有任何效果

我的代码 react-select component:

import PropTypes from 'prop-types';
import Select from 'react-select';
import { Controller } from 'react-hook-form';
import { Container, SelectHeader, Validation } from './SelectSearch.style';

const SelectSearch = ({
  name,
  label,
  header,
  placeholder,
  options,
  isClearable,
  isSearchable,
  isDisabled,
  isLoading,
  isRequired,
  error,
  margin,
  validationLabel,
  control,
}) => {
 

  return (
    <Container margin={margin}>
      <SelectHeader>{header}</SelectHeader>
      <Controller
        as={
          <Select
            label={label}
            name={name}
            placeholder={placeholder}
            options={options}
            isClearable={isClearable}
            isSearchable={isSearchable}
            isDisabled={isDisabled}
            isLoading={isLoading}
            isRequired={isRequired}
            styles={style}
          />
        }
        control={control}
        name={name}
        rules={{ required: true }}
        defaultValue={null}
      />

      {!error && validationLabel && <Validation>{validationLabel}</Validation>}
      <div>{error}</div>
    </Container>
  );
};

Answer 1

错误消息可能会更好，但是当您使用 useForm 并且忘记使用上下文表单提供程序时会发生此错误

import React from "react"
import { useForm, FormProvider } from "react-hook-form"

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

  return (
    <FormProvider {...methods} > // pass all methods into the context
      ...
    </FormProvider>

  )
}

React-select & React-hook-form 控制器问题

React-select & React-hook-form Controller issue

reactjs

react-select

react-hook-form