React Hook在useEffect中使用async函数的警告：useEffect函数必须返回一个函数。

11 浏览
0 Comments

React Hook在useEffect中使用async函数的警告：useEffect函数必须返回一个函数。

我试了一下类似下面的useEffect例子：

import React , {useState , useEffect} from 'react'
import axios from 'axios'
function Homescreen() {
useEffect(async() => {
try {
  const data = (await axios.get('/api/rooms/getallrooms')).data
console.log(data)
return data;
} catch (error) {
  console.log(error)
}
}, [])
  return (
        
Home Screen

  )
}
export default Homescreen

出现了以下警告：

看起来你写了useEffect(async () => ...)或者返回了一个Promise。相反，将异步函数写在effect内部并立即调用它：

useEffect(() => {
  async function fetchData() {
    // 这里可以使用await
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // 如果effect不需要props或state，则使用[]

0

1 答案

0 Comments

问题的原因是在useEffect中使用了一个async函数，并且没有返回一个函数来进行清理。根据React Hooks的规则，useEffect期望返回undefined或者一个清理函数，但是代码中返回了一个Promise，所以会产生警告。

解决方法是将async函数包装在一个立即执行函数中，并在函数内部调用它。这样可以避免在useEffect中声明一个函数并仅在那里调用它的问题。

代码如下：

useEffect(() => {
  (async () => {
    const response = await MyAPI.getData(someId);
    // 在这里进行处理
  })();
}, [someId]);

这样做的好处是遵循了React Hooks的规则，同时也解决了async函数在useEffect中使用时的警告问题。

0