Reactjs React，onClick仅在第二次单击、Axios、Async/Await后工作

我肯定错过了一些非常直接的东西。 我尝试发出axios GET请求，然后在异步/等待函数中设置状态，我还尝试了fetch.then。除非我两次单击getData或将其放在单独的onClick事件中，否则console.log将返回未定义。我认为状态设置正确，但console.log的性能与我预期的不一样。是否有办法将console.log与axios请求使用相同的功能？一如既往，我们非常感谢您的帮助。谢谢

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;

setretrievedData是异步方法，不能在setretrievedData之后立即获取retrievedData的更新值

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

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

setretrievedData是异步方法，不能在setretrievedData之后立即获取retrievedData的更新值

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

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

react useState的所有setter都是异步的，因此即使您等待setretrievedData，它也会在完成之前进入下一行

要仅在setter完成后运行任何代码，您需要添加一个useffect，并将状态传递给第二个arg，以观察react useState的所有setter都是异步的，因此，即使您等待setretrievedData，它也会在完成之前进入下一行

---

要仅在setter完成后运行任何代码，您需要添加一个useffect，并将状态传递到第二个arg，非常感谢。我想这回答了我的问题。但是，当我用我计划用于处理新状态的函数替换console.log时，在设置状态之前，在第一次渲染时加载它们时，我是否会遇到问题？您可以检查retrievedData是否为null或未定义以触发初始值。非常感谢。我想这回答了我的问题。但是，当我用我计划用于处理新状态的函数替换console.log时，在设置状态之前，在第一次渲染时加载它们时是否会遇到问题？您可以检查retrievedData是否为null或未定义，以触发初始值。