正如其他人已经指出的那样，这很可能是由于React 18.0引入了严格模式功能。

我写了一篇博客文章，解释了为什么会发生这种情况，以及你可以做些什么来解决它。

但如果你只是想看代码，这里:

let initialized = false

useEffect(() => {
  if (!initialized) {
    initialized = true

    // My actual effect logic...
    ...
  }
}, [])

或作为可重复使用的钩子:

import type { DependencyList, EffectCallback } from "react"
import { useEffect } from "react"

export function useEffectUnsafe(effect: EffectCallback, deps: DependencyList) {
  let initialized = false

  useEffect(() => {
    if (!initialized) {
      initialized = true
      effect()
    }
  }, deps)
}

请记住，只有在不得已的情况下才应该使用这种解决方案!

我在React 18中找到了一个非常好的解释。在React中调用UseEffect两次

注意:在生产中，它可以正常工作。在开发环境中的严格模式下，有意增加两次安装，以处理错误和所需的清理。

您很可能是在启用严格模式的开发环境中检查问题。 要验证这种情况，请搜索<React。StrictMode>标签并删除它，或构建用于生产。双重渲染的问题应该消失了。 来自React官方文档

严格模式不能自动为你检测副作用，但它可以通过使它们更具确定性来帮助你发现它们。这是通过有意地双重调用以下函数来实现的: 传递给useState、useMemo或useReducer的函数 […]

严格模式- Reactjs文档

类似的问题在这里，我的React组件渲染两次，因为严格模式

我使用这个作为我的替代useFocusEffect。我使用嵌套的react导航堆栈，如选项卡和抽屉，使用useEffect重构并不像预期的那样对我有效。

import React, { useEffect, useState } from 'react'
import { useFocusEffect } from '@react-navigation/native'

const app = () = {

  const [isloaded, setLoaded] = useState(false)


  useFocusEffect(() => {
      if (!isloaded) {
        console.log('This should called once')

        setLoaded(true)
      }
    return () => {}
  }, [])

}

还有一个例子，你在屏幕上导航了两次。

这可能不是理想的解决方案。但我用了一个变通办法。

var ranonce = false;
useEffect(() => {
    if (!ranonce) {

        //Run you code

        ranonce = true
    }
}, [])

尽管useEffect运行两次，但重要的代码只运行一次。

如果有人使用NextJS 13来这里，为了删除严格模式，你需要在next.config.js文件中添加以下内容:

const nextConfig = {
  reactStrictMode: false
}
module.exports = nextConfig

当我创建项目时，它默认使用“严格模式”，这就是为什么我必须显式设置它。