开发者问题收集

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

2020-03-10
494401
reactjs react-hooks

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

问题是，当我使用 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;

为什么它被调用两次，以及如何正确修复代码？

3个回答

将 console.log 放入 useEffect 中

可能还有其他副作用导致组件重新渲染，但 useEffect 本身只会被调用一次。您可以使用以下代码来确认这一点。 

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

如果日志“i fire once”被触发不止一次，则意味着您的问题是以下 3 件事之一。

此组件在您的页面中出现不止一次

这一点应该很明显，您的组件在页面中出现几次，每次都会安装并运行 useEffect

树上层正在卸载和重新安装

组件在其初始渲染时被强制卸载并重新安装。这可能类似于树上层发生的“关键”更改。您需要使用此 useEffect 向上移动每一层，直到它只渲染一次。那么您应该能够找到原因或重新安装。

React.Strict 模式已开启

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

此答案由 @johnhendirx 指出并由 @rangfu 撰写，请参阅 链接 ，如果这是您的问题，请给他一些支持。如果您因此而遇到问题，通常意味着您没有将 useEffect 用于其预期用途。文档中有一些关于此内容的精彩信息，您可以在 此处

阅读
Joe Lloyd
2020-03-10

从 index.js 中删除 <React.StrictMode> 此代码将是 

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

此 

root.render(
    <App />
);

React StrictMode 在开发服务器上渲染组件两次

Md Yeasin Arafat
2022-04-23

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

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

  • Functions passed to useState , useMemo, or useReducer
  • [...]

严格模式 - Reactjs 文档

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

rm_
2021-02-21