我知道已经很晚了，但我也有同样的问题，我想分享我用这样的函数解决了它!

useEffect(() => {
(async () => { 
  try {
   const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
   const json = await response.json();
    setPosts(json.data.children.map(it => it.data));
  } catch (e) {
console.error(e);
}
}) ()   
}, [])    

当你使用一个async函数

async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}

它返回一个promise，而useEffect并不期望回调函数返回promise，而是期望什么都不返回或返回一个函数。

作为警告的解决方法，您可以使用自调用异步函数。

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

或者为了更简洁，你可以定义一个函数，然后调用它

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `https://www.reddit.com/r/${subreddit}.json`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

第二种解决方案将使其更易于阅读，并将帮助您编写代码，以便在触发新请求时取消以前的请求或将最新的请求响应保存在状态中

工作codesandbox

对于React版本<=17

我建议看看Dan Abramov (React核心维护者之一)的回答:

我觉得你把事情搞得太复杂了。

function Example() {
  const [data, dataSet] = useState<any>(null)

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])

  return <div>{JSON.stringify(data)}</div>
}

从长期来看，我们将不鼓励这种模式，因为它助长了竞争条件。例如-在你的呼叫开始和结束之间任何事情都可能发生，你可以得到新的道具。相反，我们将推荐使用悬疑来获取数据，它看起来更像

const response = MyAPIResource.read();

没有影响。但与此同时，你可以将异步的东西移动到一个单独的函数并调用它。

你可以在这里阅读更多关于实验悬疑的内容。

如果你想使用eslint外部的函数。

 function OutsideUsageExample({ userId }) {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data/' + userId)
    response = await response.json()
    dataSet(response)
  }, [userId]) // if userId changes, useEffect will run again

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}

对于React版本>=18

从React 18开始，你也可以使用悬念，但如果你没有使用正确实现它的框架，还不建议使用它:

在React 18中，你可以开始在Relay、Next.js、Hydrogen或Remix等自以为是的框架中使用悬念来获取数据。从技术上讲，使用悬疑技术获取临时数据是可行的，但仍然不推荐作为一般策略。

如果不是框架的一部分，您可以尝试一些库来实现它，比如swr。

这是一个非常简单的悬念例子。你需要为悬疑抛出一个承诺来捕获它，首先显示回退组件，并在承诺被解决时呈现Main组件。

let fullfilled = false;
let promise;

const fetchData = () => {
  if (!fullfilled) {
    if (!promise) {
      promise = new Promise(async (resolve) => {
        const res = await fetch('api/data')
        const data = await res.json()

        fullfilled = true
        resolve(data)
      });
    }

    throw promise
  }
};

const Main = () => {
  fetchData();
  return <div>Loaded</div>;
};

const App = () => (
  <Suspense fallback={"Loading..."}>
    <Main />
  </Suspense>
);

其他答案已经有很多例子给出了，并且解释得很清楚，所以我将从TypeScript类型定义的角度来解释它们。

useEffect钩子TypeScript签名:

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

效果类型:

// NOTE: callbacks are _only_ allowed to return either void, or a destructor.
type EffectCallback = () => (void | Destructor);

// Destructors are only allowed to return void.
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };

现在我们应该知道为什么effect不能是一个异步函数了。

useEffect(async () => {
  //...
}, [])

async函数将返回一个带有隐式未定义值的JS promise。这不是useEffect的期望。

你也可以使用IIFE格式来保持内容简短

function Example() {
    const [data, dataSet] = useState<any>(null)

    useEffect(() => {
        (async () => {
            let response = await fetch('api/data')
            response = await response.json()
            dataSet(response);
        })();
    }, [])

    return <div>{JSON.stringify(data)}</div>
}

请试试这个

 useEffect(() => {
        (async () => {
          const products = await api.index()
          setFilteredProducts(products)
          setProducts(products)
        })()
      }, [])