Javascript 如何使用useffect（）更改React Hook Form defaultValue？

我正在创建一个页面，供用户使用React Hook表单更新个人数据。 加载paged后，我使用

useffect

获取用户当前的个人数据，并将其设置为表单的默认值

我将获取的值放入

的

defaultValue

。 但是，它只是没有显示在文本框中。 这是我的密码：

import React，{useState，useffect，useCallback}来自'React'；
从“react hook form”导入{useForm，Controller}
从“../constants”导入{URL}；
const UpdateUserData=props=>{
const[userData，setUserData]=useState（null）；
const{handleSubmit，control}=useForm（{mode:'onBlur'}）；
const fetchUserData=useCallback（异步帐户=>{
const userData=wait fetch（`${URL}/user/${account}`）
。然后（res=>res.json（））；
console.log（userData）；
setUserData（用户数据）；
}, []);
useffect（（）=>{
const account=localStorage.getItem（'account'）；
获取用户数据（账户）；
}，[fetchUserData]）
const onSubmit=async（数据）=>{
//待办事项
}
返回(
用户名：
电话：
提交
);
}
导出默认UpdateUserData您可以使用setValue（）

从useForm导入它：

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

然后在收到后使用用户数据调用它：

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

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

编辑：如果这不起作用，请参阅下面的备选答案。
setValue对我不起作用。或者，您可以使用重置方法。我在下面共享一个工作代码块。我希望它对你有用

  ...
  /* registered address */
  const [registeredAddresses, setRegisteredAddresses] = useState([]);
  
  const { register, errors, handleSubmit, reset } = useForm<FormProps>({
    validationSchema: LoginSchema,
  });

  /**
   * get addresses data
   */
  const getRegisteredAddresses = async () => {
    try {
      const addresses = await AddressService.getAllAddress();
      setRegisteredAddresses(addresses);
      setDataFetching(false);
    } catch (error) {
      setDataFetching(false);
    }
  };

  useEffect(() => {
    getRegisteredAddresses();
  }, []);

  useEffect(() => {
    if (registeredAddresses) {
      reset({
        addressName:
          registeredAddresses: registeredAddresses[0].name,

        tel: registeredAddresses[0].contactNumber,
      });
    }
  }, [registeredAddresses]);

  ...

。。。
/*注册地址*/
常量[registeredAddresses，setRegisteredAddresses]=useState（[]）；
常量{register，errors，handleSubmit，reset}=useForm({
validationSchema:LoginSchema，
});
/**
*获取地址数据
*/
const getRegisteredAddresses=async（）=>{
试一试{
const addresses=await AddressService.getAllAddress（）；
setRegisteredAddresses（地址）；
setDataFetching（假）；
}捕获（错误）{
setDataFetching（假）；
}
};
useffect（（）=>{
getRegisteredAddresses（）；
}, []);
useffect（（）=>{
如果（注册地址）{
重置({
地址名称：
registeredAddresses:registeredAddresses[0]。名称，
电话：registeredAddresses[0]。联系人号码，
});
}
}，[注册地址]；
...
@tommcandrew的setValue参数格式对我不起作用

这种格式：

useEffect(() => {
  const object = localStorage.getItem('object');
  setValue("name", object.name);
}, [])

虽然这篇文章已经发表了2个月了，但今天我偶然发现了这个问题，并寻找了几种方法来解决它。我想到的最有效的方法是使用useMemo设置默认值，如下所示：

const{control，errors，handleSubmit}=useForm({
重新验证模式：“onChange”，
defaultValues:UseMoom（（）=>yourDefaultValues，[yourDefaultValues]），
});

这允许您在表单中正确设置值，如果碰巧有字段数组（我就是这样），则无需多次实现

这在使用官方文档中的时也有效。如果你有任何问题，请告诉我
 @tam answer已经完成了使其在6.8.3版上运行所需的一半

您需要提供默认值，但也需要使用effect进行重置。如果您有一个表单是用另一个实体重新加载的，则需要这种特殊的区别。我有一个完整的例子

简而言之：
您需要在
userForm
中定义默认值

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

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

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

代码沙盒中的示例允许在两个用户之间进行交换，并让表单更改其值。
这适用于嵌套对象（我使用的是版本6.15.1）

很抱歉，我不明白你想实现什么，你能解释更多吗。正在查找所有FormValue的setValue的typescript版本吗once@tommcandrew你是对的，但我们仍然需要向表单中添加defaultValues。这对我来说适用于React Native和控制器包装器。最后。我做到了。感谢broI在6.8.3上运行，每次
yourDefaultValues
更改时都会重新计算默认值，但表单上没有任何变化（我在UseMoom中添加了调试语句）。我已从组件的
名称
验证名称是否相同，并且组件正在使用
inputRef
和
寄存器
。你有什么想法吗？复制链接：这绝对是一个更清晰的答案。@Patrick，这很有效。只是一个疑问，当我尝试不包装useMemo时，它也起作用了，我们使用useMemo的原因是，除非任何依赖项发生更改，否则它不会在下一次渲染时重新计算。由于useEffect已经存在，使用UseMoom和不使用UseMoom直接传递对象的任何其他差异？如果这个错误你能纠正我吗-新的反应：）
     useEffect(() => {
      for (const [key, value] of Object.entries(data)) {
        setValue(key, value, {
          shouldValidate: true,
          shouldDirty: true,
        });
       }
     },[data])