React报错：Effect回调需同步防竞态，代码格式存疑求助

这个错误的核心原因是：你直接把useEffect的回调写成了async函数——React要求useEffect的回调要么返回一个清理函数，要么什么都不返回，而async函数会默认返回Promise，这就违反了这个规则。

给你两种修复方案：

方案1：在useEffect内部定义async函数并调用 #

useEffect(() => {
  const fetchTasks = async () => {
    const response = await axios.get('http://localhost:5000/get-tasks')
    const dataObject = response.data
    
    const arrayOfKeys = Object.keys(dataObject)
    const arrayOfData = Object.keys(dataObject).map((key) => dataObject[key])

    console.log(arrayOfKeys)
    console.log(arrayOfData)
  }

  fetchTasks()
}, [])

方案2：使用立即执行的async函数 #

useEffect(() => {
  (async () => {
    const response = await axios.get('http://localhost:5000/get-tasks')
    const dataObject = response.data
    
    const arrayOfKeys = Object.keys(dataObject)
    const arrayOfData = Object.keys(dataObject).map((key) => dataObject[key])

    console.log(arrayOfKeys)
    console.log(arrayOfData)
  })()
}, [])

额外提醒：如果后续需要处理请求取消或清理逻辑，建议搭配AbortController使用，避免出现内存泄漏问题。

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