Question

我有2个问题...

在注册提交过程中，我需要显示一个Loading组件，直到从服务器收到响应为止。

加载组件未呈现：

const Register: FC<RouteComponentProps> = () => {

  const [loading, setLoading] = useState<boolean>(false)
  const [success, setSuccess] = useState<boolean>(false)
...

const onSubmit = async(values: Values) => {

  setLoading(true)
  try {
    const response = await register({
      variables: { data: { firstName: values.first_name, lastName: values.last_name, email: values.user_email, password: values.password } }
    })
    setLoading(false)
    if (response && response.data && response.data.register) {
      setSuccess(true)
    }
  } catch (error) {

     setLoading(false)
     ...

  }
}

return (
   ...
   { loading && <Loading/> }
)

我在哪里错了，请告诉我。

有时您会发现某些Web请求相对较快（<0.5秒）。在这种情况下，微调框将在网页上闪烁，用户没有足够的时间了解正在发生的事情。为了避免剧烈的网页DOM更改并减少用户的困惑，无论加载数据需要花费多长时间，最好在最短的时间（例如1秒）内显示微调框。我该如何实现？

谢谢！

Answer 1

您不需要显示加载时间至少为1秒，因为在获取数据时已经显示了加载图标，而在现实生活中，加载图标将超过1秒。

如果您仍要设置最小1秒

  try {
    const response = await register({
      variables: { data: { firstName: values.first_name, lastName: values.last_name, email: values.user_email, password: values.password } }
    })
//change here
 setTimeout(() => setLoading(false), 1000);

反应-在最短的时间内显示加载微调器

1 个答案: