React hook 表单在提交时返回空白对象

Question

Here's my simplified problem:

https://codesandbox.io/s/busy-fire-mm91r?file=/src/FormWrapper.tsx

And the code:

export const FormItemWrapper = ({ children }) => {
  return <FormItem>{children}</FormItem>;
};

export const FormWrapper = ({ children }) => {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data); // logs { }
  };
  return <Form onFinish={handleSubmit(onSubmit)}>{children}</Form>;
};

export default function App() {
  const { control, watch } = useForm();
  console.log(watch()); // logs { }
  return (
    <FormWrapper>
      <FormItemWrapper>
        <Controller
          control={control}
          name="tmp"
          render={({ field }) => <Input {...field} />}
        />
      </FormItemWrapper>
      <FormItemWrapper>
        <Button htmlType="submit">Save</Button>
      </FormItemWrapper>
    </FormWrapper>
  );
}

The problem:

React-hook-form doesn't seem to see the data I type in. I can get it using antd , but can't with react-hook-form . Why? What am I missing?

watch() logs only once, and it logs { } . onSubmit logs { }

Answer 1

You have created two different form instances with useForm call. If you want to get current form context inside Controller you should use useFormContext and wrap your form in FormProvider.

https://codesandbox.io/s/reverent-star-4vtpo