javascript - 如何将 setTimeout 与 Loader 一起使用

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 Hook 来更新 DOM。

您仅更新处理程序内的loading 标志。 React 不知道它需要更新 DOM。

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

fork 代码和框:https://codesandbox.io/s/inspiring-liskov-t53fv