React Hook警告：useEffect中使用异步函数的问题与修正方案

直接将async函数作为useEffect的回调函数时，会触发警告：useEffect function must return a function。

你的原始代码如下：

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 (
    <div>
        <h1>Home Screen</h1>

    </div>
  )
}

export default Homescreen

问题原因 #

useEffect的回调函数仅允许两种返回值：要么是一个用于清理操作的函数，要么不返回任何值。而async函数会默认返回一个Promise对象，这不符合useEffect的要求，因此触发警告。

正确写法 #

官方给出的修正方案是在useEffect内部定义异步函数并立即调用：

useEffect(() => {
  async function fetchData() {
    // 在这里可以使用await
    const response = await MyAPI.getData(someId);
    // ...后续业务逻辑
  }
  fetchData();
}, [someId]); // 如果effect不需要依赖props或state，依赖数组传[]即可

针对你的代码，修改后的版本如下：

import React , {useState , useEffect} from 'react'
import axios from 'axios'

function Homescreen() {

useEffect(() => {
  // 内部定义异步函数
  async function fetchRooms() {
    try {
      const data = (await axios.get('/api/rooms/getallrooms')).data
      console.log(data)
      // 若需将数据存入state，可在此处调用setState
    } catch (error) {
      console.log(error)
    }
  }
  // 立即调用异步函数
  fetchRooms();
}, [])



  
  return (
    <div>
        <h1>Home Screen</h1>

    </div>
  )
}

export default Homescreen

内容的提问来源于stack exchange，提问作者AlphaJR09