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

【问题标题】：react-hook-form conditional form value controlreact-hook-form 条件表单值控制
【发布时间】：2023-04-09 15:56:01
【问题描述】：

我想在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>
    )

【问题讨论】：

是否可以在初始化为false时更改manufacturerWatchValue？
不，只有初始化后值才会改变。

标签： reactjs react-hook-form

【解决方案1】：

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

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

// eslint-disable-next-line

示例

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

【讨论】：