React，onClick 仅在第二次点击后起作用，Axios，Async/Await

Question

我一定是遗漏了一些非常直接的东西。我正在尝试发出 axios GET 请求，然后在 async/await 函数中设置状态，我也尝试过 fetch().then()。 console.log() returns 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 ]);

Answer 2

react useState 的所有设置器都是异步的，因此即使您等待 setretrievedData 它也会在完成之前继续下一行。

到运行任何代码只有在setter完成后你需要添加一个useEffect并传递state作为第二个参数[=15] =]

React，onClick 仅在第二次点击后起作用，Axios，Async/Await

React, onClick only works after second click, Axios, Async/Await

onclick

fetch

async-await

reactjs

axios