如何解决在页面渲染完成React.useEffect调用之前渲染React Hook表单
我正在尝试使用React.useEffect内的API调用在页面的呈现中呈现特定的用户信息。在同一页面上,我使用了一个React Hook表单,该表单根据useEffect的API调用设置默认值。
问题在于,React Hook表单首先在页面呈现时呈现,并将用户信息设置为undefined,然后仅发生React.useEffect调用来设置用户信息。这样,它将始终为我提供默认的用户值,而不是API调用中的值。
这是代码
const [clients,setClients] = useState<Client>();
React.useEffect(()=>{
api.get<Client>('/clients/4').then(
(response)=> {
const clientResponse = response.data;
setClients(clientResponse);
},error => {
console.log(error);
}
)
},[]);
const methods = useForm<Client>({
defaultValues: clients ? clients : defaultClientValues,reValidateMode: 'onChange',mode: 'onChange',validationSchema: clientSchema,});
关于这一点,我总是在useForm方法内的defaultValues中获得未定义的客户端。
也尝试使用React.useLayoutEffect(),但似乎给了我同样的结果。
解决方法
如评论By default,React runs the effects after every render — including the first render
中所述。
如果子组件未获取更新的值,则可以创建另一个hook
,并将clients
分配给ref
,并每次{{ 1}}值更改。
ref
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。