反应挂钩形式条件形式值控制

时间:2020-11-09 13:43:53

标签: reactjs react-hook-form

当表格初始化后,制造商观察值更改时,我想删除模型的值。

但是由于初始化变量位于依赖项列表中,因此模型在窗体初始化后会丢失其值。 因此,我必须将其从依赖项列表中删除才能使其正常工作。

即使它按预期运行,React还是说第138:5行:React Hook useEffect缺少依赖项:“已初始化”。包括它或删除依赖项数组

在实现逻辑的同时是否有办法绕过此错误?

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>
    )

1 个答案:

答案 0 :(得分:1)

React实际上并没有向您抛出错误,而是向您抛出了拖延警告。

您可以通过在依赖性错误上方添加以下行来忽略特定的掉毛错误:

// eslint-disable-next-line

示例

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