在 React 中使用 useEffect 钩子获取数据的正确异步等待语法？

Question

我在 useEffect 钩子中使用了async作为匿名函数。我这样做是为了等待我正在获取的响应。虽然这工作正常，但我在网络上的某个地方读到，在 useEffect 挂钩内编写 async wait 是一种不好的做法，这样没有任何适当的解释。所以只是想问一下大家这是一个好的做法还是坏的做法。如果这是一个不好的做法，那么在 useEffect 中这样编写 async wait 有什么缺点，并且还想知道替代方案。非常感谢您的时间和帮助。

import { useEffect, useState } from "react";

export default function FetchPractice() {
  const [apiData, setApiData] = useState([]);

  useEffect(async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    setApiData(data);
  });

  return (
    <>
      {apiData.map((post) => (
        <div
          key={post.id}
          style={{
            border: "1px solid black",
            margin: "16px",
            padding: "16px",
            backgroundColor: "#2d2d2d",
            color: "white",
            fontWeight: "bold",
          }}
        >
          {JSON.stringify(post)}
        </div>
      ))}
    </>
  );
}

Answer 1

你不应该创建你的useEffect函数async，但你可以async在里面创建一个函数useEffect

useEffect(() => {
    const getDatas = async () => {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        setApiData(data);
    }
    getDatas()
});

甚至

useEffect(() => {
    (async () => {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        setApiData(data);
    )()
});