React Hooks:useffect（）被调用两次，即使将空数组用作参数也是如此

Question

我是reactJS新手，正在编写代码，以便在从DB加载数据之前，它将显示加载消息，然后在加载之后，使用加载的数据呈现组件。为此，我同时使用了useState钩子和useEffect钩子。代码如下：

问题是，当我使用console.log.检查时，use效应会被触发两次，因此代码会两次查询相同的数据，这应该避免。

下面是我编写的代码：

import React from 'react';
import './App.css';
import {useState,useEffect} from 'react';
import Postspreview from '../components/Postspreview'

const indexarray=[]; //The array to which the fetched data will be pushed

function Home() {
   const [isLoading,setLoad]=useState(true);
   useEffect(()=>{
      /*
      Query logic to query from DB and push to indexarray
      */
          setLoad(false);  // To indicate that the loading is complete
    })
   },[]);
   if (isLoading===true){
       console.log("Loading");
       return <div>This is loading...</div>
   }
   else {
       console.log("Loaded!"); //This is actually logged twice.
       return (
          <div>
             <div className="posts_preview_columns">
             {indexarray.map(indexarray=>
             <Postspreview
                username={indexarray.username}
                idThumbnail={indexarray.profile_thumbnail}
                nickname={indexarray.nickname}
                postThumbnail={indexarray.photolink}
             />
             )}
            </div>
         </div>  
         );
    }
}

export default Home;

有人能帮我理解为什么要调用两次，以及如何正确地修复代码吗？非常感谢你！

Answer 1

我使用这个作为我的替代use焦点效应。我使用了嵌套的反应导航堆栈，如选项卡和抽屉，使用使用效果重构对我来说并不像预期的那样有效。

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 () => {}
  }, [])

}

此外，还有一个实例，您可以在屏幕上导航两次。

Answer 2

您很可能正在启用严格模式的开发环境中检查此问题。要验证这种情况，请搜索

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

• 传递给useState、useMemo或useReucer的函数
• [...]

严格模式-反应JS文档

这里类似的问题是，由于严格模式，我的React组件渲染了两次

Answer 3

可能还有其他副作用导致组件重新渲染，但useEffect本身只会被调用一次。通过下面的代码，您可以肯定地看到这一点。

useEffect(()=>{
      /*
      Query logic
      */
      console.log('i fire once');
},[]);

如果日志“我开火一次”被触发不止一次，这意味着你的问题是两件事之一。

这个应该是显而易见的，你的组件在页面中出现了几次，每一次都将挂载并运行使用效果

组件在其初始渲染时被强制卸载和重新装载。这可能有点像树上发生的“关键”变化。您需要使用此useEffect提升每个级别，直到它只渲染一次。然后您应该能够找到原因或重新装载。

StrictMode渲染组件两次（在开发中，而不是在生产中），以便检测代码中的任何问题并向您发出警告（这可能非常有用）。

这个答案由@johnhendix指出，由@rangfu撰写，请参阅链接，如果这是你的问题，请给他一些爱。