在页面渲染完成React.useEffect调用之前渲染React Hook表单

时间:2020-08-13 06:24:43

标签: react-hooks react-hook-form

我正在尝试使用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(),但似乎给了我同样的结果。

1 个答案:

答案 0 :(得分:0)

如评论By default, React runs the effects after every render — including the first render中所述。

React Hooks documentation

如果子组件未获取更新的值,则可以创建另一个hook,并将clients分配给ref,并每次{{ 1}}值更改。

ref