React useEffect中如何实现async函数的示例解析？

本文共计1104个文字，预计阅读时间需要5分钟。

目录+引言+React为什么这样设计呢？+简单改造+1、简单改造的写法（不推荐）+2、把异步提取成单独函数或自定义hook（推荐）+引言+useEffect相比大家都很熟悉能详细吗？，如下这种写法，应该是什么样的“+

目录

• 引言
• React为什么这么设计呢？
• 简单改造
• 1、简单改造的写法（不推荐）
• 2、把异步提取成单独函数或自定义hook（推荐）

引言

useEffect相比大家都耳熟能详啦，如下这种写法，应该是非常常见的需求。

useEffect(async () => { await getPoiInfo(); // 请求数据 }, []);

但是 React 本身并不支持这么做，理由是 effect function 应该返回一个销毁函数（effect：是指return返回的cleanup函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错 ：function.apply is undefined。