如何将 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

当您触发 helloHandeler() 时，它会记录 setTimeout() 仅在两秒后启动！这是 setTimeout().

的行为

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

里面

更新

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

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

  };

Answer 2

您可以添加 useEffect 挂钩来更新 DOM。

您只是在更新处理程序中的 loading 标志。 React 不知道它需要更新 DOM.

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

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

如何将 setTimeout 与 Loader 一起使用

How to use setTimeout with a Loader

javascript

reactjs

react-functional-component

use-state