新的React文档(目前处于测试阶段)有一个章节精确地描述了这种行为:

如何处理效果发射两次在开发

从文档中可以看出:

通常，答案是实现清理功能。清除函数应该停止或撤消Effect正在做的任何事情。经验法则是，用户不应该能够区分Effect运行一次(如在生产中)和设置→清理→设置序列(如您在开发中看到的)。

所以这个警告应该让你仔细检查你的useEffect，通常意味着你需要实现一个清理函数。

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

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

我使用这个作为我的替代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 () => {}
  }, [])

}

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

正如其他人已经指出的那样，这很可能是由于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)
}

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

对我来说是严格模式。删除索引处的严格模式组件。TSX或index.jsx

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

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

        //Run you code

        ranonce = true
    }
}, [])

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