useEffect中箭头函数直接返回函数调用报错，原写法正常的原因？

你遇到的问题核心在于async函数的返回值特性：

• 原来的写法useEffect(() => { getArticles(); }, [])里，箭头函数用大括号且没有显式return，默认返回undefined，完全符合React对useEffect回调的要求（回调要么返回undefined，要么返回一个清理函数）。
• 改成useEffect(() => getArticles(), [])后，箭头函数会直接返回getArticles()的执行结果——而getArticles是async函数，它的执行结果是一个Promise对象。React在组件卸载（切换路由）时，会尝试把这个返回值当作清理函数去调用，Promise显然不是函数，所以就抛出了类似"'n' is not a function"的错误。

解决办法 #

有两种简单的修正方式：

1. 保持原有的大括号写法，虽然看起来繁琐，但最稳妥：

   useEffect(() => {
     getArticles();
   }, []);
   

2. 如果想简写，可以用void关键字吃掉async函数的返回值，确保箭头函数返回undefined：

   useEffect(() => void getArticles(), []);
   

内容的提问来源于stack exchange，提问作者Navaneeth Reddy Nalla