reactjs - React、onClick 仅在第二次单击后才起作用、Axios、Async/Await

Question

我一定错过了一些非常直接的东西。 我正在尝试发出 axios GET 请求，然后在 async/await 函数中 setState，我也尝试过 fetch().then()。 console.log() 返回 undefined ，除非我单击 getData() 两次或将其放入单独的 onClick() 事件中。我认为状态设置正确，但 console.log() 未按我的预期执行。有没有办法在与 axios 请求相同的函数中使用 console.log() ？一如既往，我们非常感谢任何帮助。谢谢!

import React, { useState } from "react";
import axios from "axios";

const SalesGraph = () => {
  const [retrievedData, setretrievedData] = useState();

  const getData = async () => {
    try {
      const salesData = await axios.get("http://localhost:5000/sales");
      await setretrievedData(salesData);
      console.log(retrievedData);
    } catch (err) {
      console.log(err);
    }
  };
  const showState = () => {
    console.log(retrievedData);
  };
  return (
    <div>
      <button onClick={getData}>Graph</button>
      <button onClick={showState}>showState</button>
    </div>
  );
};
export default SalesGraph;

Answer 1

setretrievedData 是异步方法，您无法在 setretrievedData 之后立即获取 retrievedData 的更新值。

您需要通过添加依赖项在 useEffect 中获取它。

useEffect(() => {
  console.log(retrievedData);
}, [ retrievedData ]);