如何使用 useEffect() 更改 React-Hook-Form defaultValue? [英] How to change React-Hook-Form defaultValue with useEffect()?

问题描述

我正在创建一个页面，供用户使用 React-Hook-Form 更新个人数据.加载 paged 后，我使用 useEffect 获取用户当前的个人数据并将它们设置为表单的默认值.

我将获取的值放入的defaultValue.但是，它只是没有显示在文本框中.这是我的代码:

import React, {useState, useEffect, useCallback} from 'react';import { useForm, Controller } from 'react-hook-form'从 '../constants' 导入 { URL };const UpdateUserData = props =>{const [userData, setUserData] = useState(null);const { handleSubmit, control} = useForm({mode: 'onBlur'});const fetchUserData = useCallback(异步帐户 => {const userData = await fetch(`${URL}/user/${account}`).then(res=> res.json());控制台日志(用户数据)；设置用户数据(用户数据)；}, []);useEffect(() => {const account = localStorage.getItem('account');fetchUserData(账户);}, [fetchUserData])const onSubmit = 异步(数据)=>{//去做}返回 (<div><form onSubmit={handleSubmit(onSubmit)}><div><label>用户名:</label><控制器as={}控制={控制}默认值={用户数据?用户数据名称:''}名称='名称'/>

<div><label>电话:</label><控制器as={}控制={控制}默认值={用户数据?用户数据.电话:''}姓名='电话'/>

<按钮>提交</表单>

);}导出默认的 UpdateUserData;

调用的 API 运行良好，值实际上设置为 userData 状态.

<代码>{姓名:约翰"，电话:[phone]"...}

我还尝试在 useEffect() 中使用模拟数据 setUserData，但它也不起作用.我上面的代码有问题吗?

解决方案

您可以使用 setValue (https://react-hook-form.com/api/useform/setvalue).

从 useForm 导入:

 const { handleSubmit, control, setValue} = useForm({mode: 'onBlur'});

然后在收到用户数据后调用它:

 useEffect(() => {如果(用户数据){setValue([{ name: userData.name }, { phone: userData.phone }]);}}， [用户数据]);

您可以从表单中删除默认值.

如果这不起作用，请参阅下面的替代答案.

I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form.

I put the fetched value into defaultValue of <Controller />. However, it is just not showing in the text box. Here is my code:

import React, {useState, useEffect, useCallback} from 'react';
import { useForm, Controller } from 'react-hook-form'
import { URL } from '../constants';

const UpdateUserData = props => {
    const [userData, setUserData] = useState(null);
    const { handleSubmit, control} = useForm({mode: 'onBlur'});

    const fetchUserData = useCallback(async account => {
        const userData = await fetch(`${URL}/user/${account}`)
                            .then(res=> res.json());
        console.log(userData);
        setUserData(userData);
    }, []);

    useEffect(() => {
        const account = localStorage.getItem('account');
        fetchUserData(account);
    }, [fetchUserData])

    const onSubmit = async (data) => {
        // TODO
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <label>User Name:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.name : ''}
                        name='name'
                    />
                </div>
                
                <div>
                    <label>Phone:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.phone : ''}
                        name='phone'
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

export default UpdateUserData;

The called API is working well and the value is actually set to userData state.

{
  name: "John",
  phone: "02-98541566"
  ...
}

I also tried to setUserData with mock data in useEffect(), and it doesn't work either. Is there any problem in my above code?

解决方案

You can use setValue (https://react-hook-form.com/api/useform/setvalue).

Import it from useForm:

    const { handleSubmit, control, setValue} = useForm({mode: 'onBlur'});

Then call it with the user data after it's received:

  useEffect(() => {
    if (userData) {
      setValue([{ name: userData.name }, { phone: userData.phone }]);
    }
  }, [userData]);

You can remove the default values from the form.

EDIT: See alternative answers below if this does not work.

这篇关于如何使用 useEffect() 更改 React-Hook-Form defaultValue?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！