Реагируйте js как вернуть div с asyn c timeout - PullRequest
Новая
       21

Реагируйте js как вернуть div с asyn c timeout

0 голосов
/ 17 апреля 2020

Я пытаюсь вернуть крошечный кусок кода в моем основном возврате для компонента, который рассчитан по времени. В моем возвращении я хочу, чтобы div-функции myFunction отображались через 5 секунд (если условие выполнено), но, похоже, отображает только ошибку. Я посмотрел документацию о реакции, и кажется, что вы действительно можете вызвать функцию для возврата 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{

Я все еще новичок в таких вещах, поэтому я могу испортить свое обещание или что-то в этом роде. Я просто не могу понять, как заставить его вернуть мой HTML / JSX через 5 секунд.

Ответы [ 2 ]

2 голосов
/ 18 апреля 2020

Вы можете использовать ловушку 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/ealipio/pen/yLYJvVW?editors=0010

0 голосов
/ 18 апреля 2020

Миллисекунды для вашего setTimeout имеют слишком много нулей, в настоящее время он ожидает 50 секунд. Я не знаю, решит ли это вашу проблему, но я подумал, что укажу на это.

...