如何在 useEffect 中使用异步函数 How to use async functions in useEffect

useEffect通常是在 React 中进行数据获取的地方。数据获取意味着使用异步函数

• 第一个参数应该是一个函数，它不返回任何内容 ( undefined) 或一个函数（以清除副作用）。但是异步函数返回一个 Promise，不能作为函数调用！
• 第一个回调参数返回的是一个clean-up函数，所以不能返回promise对象，更不能直接使用async/await

方法一

方法二

方法三

自己写个customHook => useAsyncEffect

export function useAsyncEffect(method, deps) {
  useEffect(() => {
      (async function() {
        await method()
      })()
  }, deps)
}

useAsyncEffect(async () => {
    getHolesTimesData(params)
        .then(response => {
            if(response && response.data && response.data.length > 0) {
                selectedRowsDefault = response.data;
                let rowKeys = response.data.map((item, index) => {
                    return index
                })
            }
        })
}, [params])

参考文献：ahooks.js.org/hooks/use-a…

参考文献：devtrium.com/posts/async…

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习