使用 react-hook-form 時出現無效的掛鈎調用警告

Question

我是新手，無法做出反應並嘗試運行以下代碼，但收到錯誤消息：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我嘗試按照以下步驟幫助確定出了什么問題，但無法修復它。 （我不認為問題出在第 2 點或第 3點。）

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />

      <input type="submit" />
    </form>
  );
}

根據我的 node_module 文件夾中的項目，react 和 react-dom 的版本都是 17.0.2。

我做錯了什么嗎？

非常感謝

Answer 1

It could be that your ran npm install --save react-hook-form (or similar for yarn ) in the wrong directory, and therefore your actual package.json and package-lock.json files do not contain a reference to the react-hook-form package。 如果是這樣，您的import語句可能設置了對useForm的無效引用。