如何使用React Hooks API管理异步函数

Question

我正在使用React Hooks，我正在尝试更新状态，然后做一些异步的事情，然后根据状态做一些事情。这不起作用，因为更新状态在async函数中不可用。如何使用react钩子解决这样的任务？

Demo

我基本上试图改变函数的作用域，但显然它都是不可变的，这意味着异步函数内部的引用指向旧状态。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// Constants
function somethingAsync(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

function App() {
  const [loading, setLoading] = React.useState(false);

  const doSomethingAsync = async () => {
    setLoading(true);
    await somethingAsync(2000);
    if (loading) {
      setLoading(false);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>Current Status: {loading ? "Loading" : "Not Loading"}</p>
      <button onClick={doSomethingAsync}>Do Something Async</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我希望每次异步函数完成时，加载标志都被重置为false，这应该根据异步函数的状态进行更新。现在，由于异步作用域中的旧引用，它只能每隔一秒工作一次。

Answer 1

只需删除setLoading(false)调用两边的if即可。

如果不这样做，该函数将访问过时的loading状态。因为在创建该函数时，loading是false。因此，在您运行异步函数之后，在等待之后，您的函数将恢复，即使loading为true，它也会将其视为false。但是您将知道它将是true，因为您刚刚设置了它，并且您的App已经在await语句中重新呈现。请参见下面的行为：

CodeSandbox

​

​

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// Constants
function somethingAsync(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

function App() {
  const [loading, setLoading] = React.useState(false);
  console.log("App rendering...");

  const doSomethingAsync = async () => {
    setLoading(true);
    console.log("Before await...");
    await somethingAsync(2000);
    console.log("After await...");
    setLoading(false);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>Current Status: {loading ? "Loading" : "Not Loading"}</p>
      <button onClick={doSomethingAsync}>Do Something Async</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

您只需要删除异步函数中的if条件：

  const doSomethingAsync = async () => {
      setLoading(true);
      await somethingAsync(2000);
      setLoading(false);      
    };