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

Question

我正在尝试使用 React.useEffect 中的 API 调用在呈现页面时呈现特定用户信息。在同一页面上，我使用了一个 React Hook 表单，它根据来自 useEffect 的 API 调用设置默认值。

问题是 React Hook 表单首先在页面呈现时呈现，并将用户信息设置为未定义，然后仅发生设置用户信息的 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 并每次更新 ref clients 值更改。

const clientsRef = React.useRef(defaultClientValues);

React.useEffect(() => {
  api.get<Client>('/clients/4').then(
    (response) => {
      const clientResponse = response.data;
      setClients(clientResponse);
    },
    error => {
      console.log(error);
    }
  )
}, []);

React.useEffect(() => {
  clientsRef.current = clients;
}, [clients);

const methods = useForm<Client>({
  defaultValues: clientsRef.current ? clientsRef.current : defaultClientValues,
  reValidateMode: 'onChange',
  mode: 'onChange',
  validationSchema: clientSchema,
});

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

React Hook form is being rendered before React.useEffect call is being completed on page rendering

react-hooks

react-hook-form