React，onClick 仅在第二次单击后有效，Axios，Async/Await答案

【问题标题】：React, onClick only works after second click, Axios, Async/AwaitReact，onClick 仅在第二次单击后有效，Axios，Async/Await
【发布时间】：2020-11-19 03:22:14
【问题描述】：

我一定错过了一些非常直截了当的东西。我正在尝试发出 axios GET 请求，然后在 async/await 函数中设置状态，我也尝试过 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;

【问题讨论】：

标签： reactjs async-await axios onclick fetch

【解决方案1】：

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

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

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

【讨论】：

非常感谢。我想这回答了我的问题，但是当我用我计划用来处理新状态的函数替换 console.log() 时，在状态设置之前，它们在第一次渲染时加载时我不会遇到问题吗？
可以检查retrievedData是否为null或undefined来触发初始值。

【解决方案2】：

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

要仅在 setter 完成后运行任何代码，您需要添加 useEffect 并传递 state 以作为第二个参数进行观察

【讨论】：