javascript - 如何使用 useEffect() 更改 React-Hook-Form defaultValue？

Question

我正在创建一个页面供用户使用 React-Hook-Form 更新个人数据。
加载分页后，我使用 useEffect获取用户当前的个人数据并将其设置为表单的默认值。
我将获取的值放入 defaultValue的 <Controller /> .
但是，它只是没有显示在文本框中。
这是我的代码:

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;

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

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

我也试过setUserData模拟数据在 useEffect() ，它也不起作用。
我上面的代码有什么问题吗？

Answer 1

@tam 答案是使它与 6.8.3 版一起工作所需的一半。
你需要提供默认值还要使用Effect来重置。如果您有一个与另一个实体一起重新加载的表单，则需要这种特殊的区别。我在 CodeSanbox here 中有一个完整的示例.
简而言之:
您需要在 userForm 中定义默认值.

 const { register, reset, handleSubmit } = useForm({
    defaultValues: useMemo(() => {
      return props.user;
    }, [props])
  });

然后你需要倾听潜在的变化。

  useEffect(() => {
    reset(props.user);
  }, [props.user]);

代码沙箱中的示例允许在两个用户之间进行交换并让表单更改其值。