我正在创建一个页面，供用户使用 React-Hook-Form 更新个人数据。
加载分页后，我使用useEffect获取用户当前的个人数据并将其设置为表单的默认值。
我将获取的值放入defaultValue of <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 state.
{
name: "John",
phone: "02-98541566"
...
}
我也尝试过setUserData与模拟数据useEffect()，而且它也不起作用。
我上面的代码有问题吗？
@tam 的答案是使其与 6.8.3 版本一起工作所需的一半。
您需要提供默认值，还需要使用Effect 来重置。如果您有一个使用另一个实体重新加载的表单，则需要这种特殊的区别。我有一个完整的例子代码沙箱在这里 https://codesandbox.io/s/usereacthookformdefaultvalue-h6d71?file=/src/MyForm.tsx.
简而言之，你需要定义你的defaultValues in the useForm:
const { register, reset, handleSubmit } = useForm({
defaultValues: useMemo(() => {
return props.user;
}, [props])
});
然后你需要倾听潜在的变化。
useEffect(() => {
reset(props.user);
}, [props.user]);
代码沙箱中的示例允许在两个用户之间交换并让表单更改其值。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
