时间戳

首页 > 解决方案 > React js如何使用异步超时返回div

javascript - React js如何使用异步超时返回div

问题描述

我试图在我的主要返回中为一个定时组件返回一小段代码。在我返回时，我希望在等待 5 秒后显示 myFunction div（如果满足条件），但它似乎只显示一个错误。我查看了 react 文档，看来您确实可以调用一个函数来返回 html/jsx，所以我不确定自己做错了什么。这是我在该区域的代码：

function myFunction(){
      return (
        <div className="error-container">
            <h1>Oops!</h1>
            <h2>I ate the page you're looking for</h2>
            <img className="errorImage" src={ErrorImage} alt= 'website error' />
            <Link to='/'><button className="errorButton"> Back to Home </button></Link>
          </div>
      );

    }

    const add5SecondsDelay = () => {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(myFunction());
        }, 50000);
      });
    }

    async function asyncFunctionCall() { 
      const result = await add5SecondsDelay ();
    }


  return (
    <div className="detail-container">
        {(() => {
           if(!item.name){
            return (
              <div>
              {asyncFunctionCall()}

              </div>


            )
          } else{

我对这类事情还很陌生，所以我可能会搞砸我的承诺或其他什么。我只是不知道如何让它在 5 秒后返回我的 HTML/JSX。

标签： javascriptreactjsfunctionasync-awaitreact-hooks

解决方案

您可以使用 useEffect 钩子等待这 5 秒并更改变量的状态，然后在返回时执行以下操作：


import React, { useState, useEffect } from 'react';

const MyDiv = () =>  (<div>Hi</div>)

const YourComponent = () => {
  const [isDivVisible , setIsDivVisible ] = useState(false)
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsDivVisible(true)
      console.log('5 seconds later')
    }, 5000);
    return () => clearTimeout(timer);
  }, []);

  return isDivVisible ? <MyDiv/> : <div>Loading</div>
}

检查这支笔：https ://codepen.io/elipio/pen/yLYJvVW?editors=0010

推荐阅读