Как использовать setTimeout с загрузчиком

Question

У меня есть простой функциональный компонент, где я нажимаю кнопку, и она отображается, я пытаюсь заставить мой импортированный счетчик показывать в течение 2 секунд при нажатии кнопки, а затем показывать мой импортированный компонент через две секунды, однако я Я могу только показать счетчик через 2 секунды после нажатия кнопки и не могу остановить его

import React, { useState } from "react";
import Hello from "./Hello";
import Spinner from '../Spinner/Spinner'
import "./styles.css";

export default function App() {
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);

  const helloHandeler = () => {
    setTimeout(() => {
      setLoading(!loading)
    }, 2000)
    setShow(!show);
  };

  if (loading) return <Spinner />

  return (
    <div className="App">
      <h1>Adding a Spinner</h1>
      <div className="bodyContainer">
        {!show && <button onClick={helloHandeler}>Click me</button>}
        {show && <Hello />}
      </div>
    </div>
  );
}

Рабочий пример можно найти здесь: https://codesandbox.io/s/gallant-engelbart-y3jus

Answer 1

Вы можете добавить useEffect хук, чтобы обновить DOM.

Вы обновляете только флаг loading внутри обработчика. React не знает, что нужно обновить DOM.

useEffect(() => {
  if (loading) {
    setTimeout(() => {
    setLoading(false);
  }, 2000);
  }
}, [loading]);

Forked коды и box: https://codesandbox.io/s/inspiring-liskov-t53fv

Answer 2

Когда вы запускаете helloHandeler(), он регистрирует setTimeout() для запуска только через две секунды! Это поведение setTimeout().

Вместо этого вы должны setLoading() немедленно, а затем setTimeout прекратить загрузку через 2se c после. Возможно, вы захотите setShow() после двух se c также, поэтому поместите его в setTimeout().

обновление

Также, помните, что JS работает асинхронно, поэтому, когда вы регистрируете setTimeout, loading еще не true.

  const helloHandeler = () => {
    setLoading(true)
    setTimeout(() => {
    setLoading(false)
    setShow(!show);
    }, 2000)

  };