如何在加载器中使用 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]);

分叉的代码框：https://codesandbox.io/s/inspiring-liskov-t53fv

Answer 2

当您触发helloHandeler() 时，它正在注册setTimeout() 以仅在两秒钟后启动！这是setTimeout()的行为。

相反，您应该立即setLoading()，然后setTimeout 在 2 秒后停止加载。也许你也想在两秒后setShow()，所以把它放在setTimeout()里面。

更新

另外，请记住 JS 是异步工作的，因此，当您注册 setTimeout 时，loading 还不是true。

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

  };