react-hook-form 条件表单值控制

Question

我想在 manufacturerWatchValue 更改时删除模型的值 在表单初始化后。

但是模型在表单初始化时失去了它的值，因为初始化变量在依赖列表中。 因此，我不得不将其从依赖项列表中删除以使其正常工作。

尽管它按预期工作，React 说 行 138:5：React Hook useEffect 缺少依赖项：'initialized'。包括它或删除依赖数组

有没有办法在实现逻辑的同时绕过这个错误？

const MyForm = ({ itemId }) => {
    const { watch, setValue, handleSubmit, reset } = useForm()
    const [initialized, setInitialized] = useState(false)
    const manufacturerWatchValue = watch("manufacturer")

    useEffect(() => {
        // Initializing Form Here
        itemId &&
            (async () => {
                const oneItem = await getOneResult(itemId)
                reset(oneItem)
                setInitialized(true)
            })()

        // Terminating Form Here
        return () => {
            reset({})
            setInitialized(false)
        }
    }, [dispatch, reset, itemId])

    useEffect(() => {
        if (initialized) {
            setValue("model", "")
        }
    }, [manufacturerWatchValue, setValue /*, initialized */])

    const onSubmit = (data) => {
      console.log(data)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type="text" name="model" ref={register} />
            <input type="text" name="manufacturer" ref={register} />
        </form>
    )

Answer 1

React 实际上并没有向您抛出错误，而是向您抛出 eslint 警告。

您可以通过在依赖项错误上方添加此行来忽略特定的 linting 错误：

// eslint-disable-next-line

例子

useEffect(() => {
  console.log("My code")
  
  // eslint-disable-next-line
}, [])

react-hook-form 条件表单值控制

react-hook-form conditional form value control

reactjs

react-hook-form