即使使用空数组作为参数，useEffect()也会被调用两次

I am new to reactJS and am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am using both useState hook and useEffect hook. Here is the code:

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

下面是我写的代码:

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;

有人能帮助我理解为什么它被调用两次，以及如何正确地修复代码吗? 非常感谢!

当前回答

没什么好担心的。当你在开发模式下运行React时。它有时会运行两次。在刺激环境中测试它，您的useEffect将只运行一次。别担心! !

2022-07-18 10:42:53

其他回答

如果你正在使用Next js，将reactStrictMode从“true”更改为false:

将此添加到你的next.config.js中

reactStrictMode: false,

2022-08-19 11:16:43

我遇到过这样的问题:

const [onChainNFTs, setOnChainNFTs] = useState([]);

将触发useEffect两次:

useEffect(() => {
    console.log('do something as initial state of onChainNFTs changed'); // triggered 2 times
}, [onChainNFTs]);

我确认组件MOUNTED ONLY ONCE和setOnChainNFTs没有被调用不止一次-所以这不是问题所在。

我通过将onChainNFTs的初始状态转换为null并进行空检查来修复它。

e.g.

const [onChainNFTs, setOnChainNFTs] = useState(null);

useEffect(() => {
if (onChainNFTs !== null) {
    console.log('do something as initial state of onChainNFTs changed'); // triggered 1 time!
}
}, [onChainNFTs]);

2021-07-30 13:52:24

请检查你的index.js

  <React.StrictMode>
    <App />
  </React.StrictMode>

删除<React。StrictMode >包装您现在应该发射一次

root.render(
    <App />
);

2022-04-22 03:28:23

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

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

严格模式- Reactjs文档

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

2021-02-21 17:03:15

下面是为您的目的定制的钩子。这对你的情况可能有帮助。

import {
  useRef,
  EffectCallback,
  DependencyList,
  useEffect
} from 'react';

/**
 * 
 * @param effect 
 * @param dependencies
 * @description Hook to prevent running the useEffect on the first render
 *  
 */
export default function useNoInitialEffect(
  effect: EffectCallback,
  dependancies?: DependencyList
) {
  //Preserving the true by default as initial render cycle
  const initialRender = useRef(true);

  useEffect(() => {
   
    let effectReturns: void | (() => void) = () => {};
    
    /**
     * Updating the ref to false on the first render, causing
     * subsequent render to execute the effect
     * 
     */
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      effectReturns = effect();
    }

    /**
     * Preserving and allowing the Destructor returned by the effect
     * to execute on component unmount and perform cleanup if
     * required.
     * 
     */
    if (effectReturns && typeof effectReturns === 'function') {
      return effectReturns;
    } 
    return undefined;
  }, dependancies);
}

2021-08-26 17:50:41

即使使用空数组作为参数，useEffect()也会被调用两次

推荐文章

最新文章

标签