将异步函数封装在UseEffect中

Question

我对异步函数的工作方式感到困惑。

console.log返回一个错误，因为data.rates还不存在。但是我想，因为useEffect函数是异步的，所以在异步结束后，它下的任何东西都会被调用。

function App() {
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      const result = await axios.get(
        "https://open.exchangerate-api.com/v6/latest"
      );
      setData(result.data);
    })();
  }, []);

  console.log(data.rates); <-- Error data.rates does not exist
  return <div>{!data ? "Loading..." : "Hello"}</div>;
}

Answer 1

您的假设实际上是正确的，此场景中的useEffect将在组件挂载时运行，这意味着console.log将被调用两次--第一次调用初始值(未定义)，第二次是useEffect在满足请求后执行数据设置(setData)时的副作用。当数据陈旧时，通常会提供“加载”状态。

function App() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      setLoading(true);
      const result = await axios.get(
        "https://open.exchangerate-api.com/v6/latest"
      );
      setLoading(false);
      setData(result.data);
    })();
  }, []);

  if (loading) return <div>Fetching data...</div>

  return <div>Hello</div>;
}

Answer 2

我觉得没有一个答案能真正回答这个问题。

useEffect不会停止执行流程，在传递给它的回调中做什么并不重要。因此，执行console.log(data.rates)，然后在挂载组件后执行传递给useEffect的回调。由于在回调(setData(result.data))中正在更改状态，这将触发重呈现，这次您应该看到正确的值被记录，没有任何错误。

Answer 3

尝试这样做(我已经创建了一个解决方案)

function App() {
    const [data, setData] = useState();

    useEffect(()=>{
        const setObtainedData=async()=>{
            const result = await axios.get("https://open.exchangerate-api.com/v6/latest");
            setData(result.data);
        };
        setObtainedData();
    },[]);

    if(data){
        console.log(data.rates);
    }
    return <div>{!data ? "Loading..." : "Hello"}</div>;
};