React useEffect中如何改写不支持async function的示例为长尾？

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

目录引言：React为什么如此设计？

1.简单改造：1、简单改造的写法（不推荐）

2.简单改造：2、把异步提取成单独函数或自定义hook（推荐）

引言：React的设计哲学是什么？

1.简单改造：1、简单改造的写法（不推荐）

2.简单改造：2、将异步操作提取为单独函数或自定义hook（推荐）

目录

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

引言

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

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

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