ReactHook报错之——func.apply is not a function...

首先看以下代码，通常使用在刚进组件时通过接口获取一些数据。

useEffect(async () => {
  const result = await queryCodeToken(customerId)
  console.log(result) // 能打印出结果
  setList(result)
}, [])

这合理吗？非常合理，不但能console.log，页面也渲染出来了。

但如果你销毁了这个组件或者跳转页面，页面就会崩溃出现下面的报错。

这个报错就很头疼，找不到问题的原因在哪，func.apply is not a function...我没有写func.apply呀。

这该怎么办？凉拌。

一般我们找问题只看有关error的信息，但仔细探索可以发现，每次打开这个组件时都会报一个warning，这次问题关键其实在warning里面。

原文：Warning: An effect function must not return anything besides a function, which is used for clean-up.

翻译下的意思大致是：除了清除函数，其他所有的函数都不被允许。

这时我想起async/await语法糖，async会返回一个promise函数。

这么重要的信息怎么可以报warning不报error呢？当然可以，报error是情分，报warning是本分，谁让我不看warning的。

那么怎么去解决呢？我这里提供了2个方法

1. 既然语法糖会有坑，那就不用语法糖我直接queryCodeToken(customerId).then(...)，在then里面去做处理。
2. 可以封装一下queryCodeToken这样就不会有返回一个promise，然后在useEffect里面调用这个方法。