警告:为输入提供了意外的ref对象.使用ref-setter函数或React.createRef().使用React H

Question

我是react-hook形式的新手。我将代码粘贴到

下面

import React from "react";
import { useForm } from "react-hook-form";
const Inventory = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
className="border border-gray-900 rounded-lg p-2"
type="number"
placeholder="Number"
ref={register("number", { required: true })}
/>
{errors.number && <p>This is required</p>}
<button
className="mt-4 text-white bg-gray-900 border-2 border-gray-900 rounded-md px-2 py-1"
type="submit"
>
Add
</button>
</form>
);
};
export default Inventory;

当我提交表单时，我在控制台中没有得到任何输出。此外，我得到一个警告

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef().

这里有什么问题?

感谢

Answer 1

好的，我在代码中犯了一个错误。我写了这个

ref={register("number", { required: true })}

而不是

{...register("number", { required: true })}

Answer 2

对于我的情况，我删除了ref，不知道这是否是正确的修复

Answer 3

出现错误的主要原因是代码中没有导入useRef。

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef().

我有同样的错误，并通过使用useRef，我修复了它。

import { useRef } from "react";

ref是一个来自useRef本身的属性，通常在React App中做香草JS的东西