Как вернуть jsx после setTimeout - PullRequest
Новая
       6

Как вернуть jsx после setTimeout

0 голосов
/ 11 октября 2018

У меня есть состояние загрузки, которое я хочу показать, только если загрузка занимает более 1 секунды (поскольку я не хочу продолжать показывать загрузчик, даже если время загрузки составляет всего несколько миллисекунд).

Это тот, который показывает загрузчик независимо от скорости загрузки: 

if(loading) {
    return <div className="loader" />;
}

Это тот, у которого setTimeout: 

if(loading) {
    setTimeout(function() {
        return <div className="loader" />;
    }, 1000);
}

Я понимаю, что выражение return относится кsetTimeout, а не компонент, поэтому он не работает.

Должен ли я сначала создать состояние (например, isLoadingSlow), которое я изменю на true через 1 секунду при обратном вызове setTimeout?Затем, исходя из этого состояния, я бы сделал оператор return с загрузчиком jsx?

1 Ответ

0 голосов
/ 11 октября 2018

ПРИМЕЧАНИЕ: этот ответ написан на основе ответа, который был удален из этого поста.

Я думаю, что вам нужно иметь две переменные, одна из которых является loader, другая - show loader.Через одну секунду, если она все еще загружается, мы должны обновить статистику, чтобы показать загрузчик, иначе она не будет отображаться. 

state= {
   loading: true,
   showLoader: false
}

componentDidMount() {
    setTimeout(() => {
      if(this.loading){
          this.setState({ showLoader: true })
      }
    }, 1000);
}
render() {
   if(this.state.showLoader) {
        return <div className="loader" />;
   }
}
...