响应调用 setTimeout 在 onClick 似乎不等待

Question

我需要在 onClick 函数上执行一个异步函数。所以，第一步是使用 setTimeout 来模拟它，我试过了，但我的组件没有等待 3 秒。我的代码有什么问题？非常非常简单。

const {useState} = React;

const App = ({}) => {
  const [loading, setLoading] = useState(false);

  const doThat = async () => {
    console.log(" doThat");
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 3000);
    setLoading(false);
  };

  return loading ? (
    <div>Loading...</div>
  ) : (
    <div>
      <h1
        onClick={() => {
          console.log("clicked...");
          doThat();
          console.log("...end");
        }}
      >
        Click me
      </h1>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

只需删除 setTimeout

之后的 setLoading(false);

  const doThat = async () => {
    console.log(" doThat");
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };

响应调用 setTimeout 在 onClick 似乎不等待

React call setTimeout at onClick seems not to wait

javascript

settimeout

async-await

reactjs