Question

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

Answer 1

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

React Hooks documentation

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

ref

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

1 个答案: