解决 React 中 useEffect 运行两次的问题_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

解决 React 中 useEffect 运行两次的问题

2025-10-10

浏览次数：次

返回列表

解决 react 中 useeffect 运行两次的问题

摘要：本文旨在帮助开发者理解并解决 React 应用中 useEffect 钩子意外运行两次的问题。我们将深入探讨导致此现象的常见原因，并提供相应的解决方案，确保你的副作用函数仅在预期时机执行，避免潜在的性能问题和数据不一致。通过本文的学习，你将能够更好地控制 useEffect 的行为，构建更稳定、更高效的 React 应用。

在 React 开发中，useEffect 是一个强大的钩子，用于处理副作用操作，如数据获取、订阅事件等。然而，有时开发者会遇到 useEffect 运行两次的意外情况，这可能会导致不必要的 API 调用、资源浪费，甚至数据错误。本文将深入探讨导致 useEffect 运行两次的常见原因，并提供相应的解决方案。

常见原因及解决方案

React Strict Mode

React 的 Strict Mode 是一种开发模式，旨在帮助开发者发现潜在的问题。在 Strict Mode 下，React 会故意调用某些函数两次，包括 useEffect 中的副作用函数。这有助于开发者识别那些不纯的副作用函数，即那些会修改组件外部状态的函数。

解决方案：
- 开发环境： 如果你只在开发环境中遇到此问题，并且确认你的副作用函数是纯的，可以暂时禁用 Strict Mode 来避免重复执行。但请注意，这会隐藏潜在的问题，因此建议在发布前重新启用 Strict Mode 进行检查。
- 生产环境： 在生产环境中，不应禁用 Strict Mode。如果 useEffect 运行两次导致问题，你需要修改副作用函数，使其成为纯函数。例如，确保在副作用函数中只进行数据获取或更新组件内部状态，避免直接修改全局变量或外部 API。
示例：

假设你的 index.tsx 文件中使用了 Strict Mode：
```
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```
你可以暂时移除来禁用 Strict Mode。
依赖项问题

useEffect 的第二个参数是一个依赖项数组，用于指定 effect 应该在哪些值发生变化时重新运行。如果依赖项数组为空 []，则 effect 只会在组件首次渲染时运行一次。但是，如果依赖项数组中的值发生变化，effect 就会重新运行。

解决方案：
- 检查依赖项： 仔细检查依赖项数组，确保其中只包含 effect 真正依赖的值。如果依赖项数组包含不必要的值，effect 可能会在不应该运行的时候运行。
- 使用正确的依赖项： 确保依赖项数组中的值是最新的。如果依赖项数组中的值是过时的，effect 可能会在应该运行的时候没有运行。
示例：
```
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Initial Name');

  useEffect(() => {
    console.log('Effect is running');
    document.title = `Count: ${count}`;
  }, [count]); // Only runs when 'count' changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
```
在这个例子中，useEffect 只会在 count 的值发生变化时运行，因为 count 是唯一的依赖项。如果添加了 name 作为依赖项，那么每次 name 改变时，useEffect 也会运行。
行业贸易网站管理系统 2007 Beta 1
1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修
0 查看详情
组件重新渲染

如果组件由于其他原因重新渲染，useEffect 也会重新运行。这可能是由于父组件的状态更新、props 改变，或者使用了 forceUpdate 等方法。

解决方案：
- 优化组件渲染： 使用 React.memo、useMemo、useCallback 等方法来优化组件的渲染性能，避免不必要的重新渲染。
- 避免不必要的状态更新： 仔细检查你的代码，确保只在必要时更新组件的状态。
示例：
```
import React, { useState, useEffect, memo } from 'react';

const MyChildComponent = memo(({ data }) => {
  useEffect(() => {
    console.log('Child Effect running with data:', data);
  }, [data]);

  return <p>Data from parent: {data}</p>;
});

function MyParentComponent() {
  const [parentCount, setParentCount] = useState(0);

  return (
    <div>
      <button onClick={() => setParentCount(parentCount + 1)}>
        Increment Parent Count
      </button>
      <MyChildComponent data={parentCount} />
    </div>
  );
}

export default MyParentComponent;
```
在这个例子中，MyChildComponent 使用 memo 进行包裹，只有当 data prop 发生变化时才会重新渲染，从而避免了不必要的 useEffect 运行。

Next.js 开发环境下的 Fast Refresh

在使用 Next.js 开发时，Fast Refresh 功能可能会导致 useEffect 在保存代码时运行两次。这是为了提供更快的开发体验，但有时会导致副作用函数意外执行。

解决方案：

检查代码逻辑： 确保你的副作用函数是幂等的，即多次执行不会产生副作用。
条件执行： 可以添加条件判断，只在特定情况下执行副作用函数。

示例（基于问题中的代码）：

问题中的代码存在 loading 状态管理的问题，导致 useEffect 运行两次，并且 loading 状态始终为 false。以下是修改后的代码：

import { type AppType } from 'next/app';
import { api } from '~/utils/api';
import '~/styles/globals.css';
import N* from '~/components/N*';
import { useEffect, useState } from 'react';

const MyApp: AppType = ({ Component, pageProps }) => {
  const [showCart, setShowCart] = useState(false);
  const [loading, setLoading] = useState(true); // Set initial loading state to true

  const createSession = api.user.createSession.useMutation();

  const generateId = async (): Promise<string | undefined> => {
    const res = await createSession.mutateAsync();
    if (res.response) {
      return res.response.id;
    } else if (res.error) {
      return res.error;
    }
  };

  const setSessionId = async () => {
    const tmp: string | undefined = await generateId();
    if (tmp) document.cookie = `sessionId=${tmp}`;
    setLoading(false);
  };

  useEffect(() => {
    const getSessionId = () => {
      const cookieString: string = document.cookie;
      const cookies: string[] = cookieString.split(';') || [];

      let sessionId: string | null = null;

      for (let i = 0; i < cookies.length; i++) {
        const cookie: string | undefined = cookies[i];

        if (!cookie || cookie.trim() === '') {
          continue;
        }

        if (cookie.trim().startsWith('sessionId=')) {
          sessionId = cookie.trim().substring('sessionId='.length);
          break;
        }
      }

      return sessionId;
    };

    if (!getSessionId()) {
      setSessionId();
    } else {
      setLoading(false); // Set loading to false if session ID is present
    }
  }, []);

  return (
    <>
      <N* showCart={showCart} setShowCart={setShowCart} />
      {loading && <h1>LOADING</h1>} {/* Show LOADING only if loading is true */}
      <Component {...pageProps} />
    </>
  );
};

export default api.withTRPC(MyApp);

关键修改：

初始 loading 状态： 将 loading 的初始状态设置为 true，确保在获取 session ID 之前显示 "LOADING"。
getSessionId 函数： 提取获取 session ID 的逻辑到单独的函数中，提高代码可读性。
在找到 session ID 后设置 loading 为 false： 如果在 cookie 中找到了 session ID，则将 loading 设置为 false。

总结

useEffect 运行两次通常是由于 React Strict Mode、依赖项问题、组件重新渲染或 Next.js Fast Refresh 引起的。通过理解这些原因，并采取相应的解决方案，你可以更好地控制 useEffect 的行为，构建更稳定、更高效的 React 应用。在调试 useEffect 时，始终要仔细检查依赖项、组件渲染逻辑，并考虑是否启用了 Strict Mode 或 Fast Refresh。

以上就是解决 React 中 useEffect 运行两次的问题的详细内容，更多请关注其它相关文章！

# 是一个 # 立水桥网站建设 # 宁安页面seo优化 # 长春seo优化网站 # 丽江网站建设流程图 # 南阳网站推广威欣hfqjwl做词 # 网站建设下拉菜单 # 贵定网站优化 # 抖音营销活动怎么推广 # 邮政ems 营销推广码在哪 # 马蜂窝旅游网网站推广 # 组中 # 你可以 # 在这个 # 也会 # 网站管理系统 # css # 复选框 # 会在 # 两次 # 关键词 # 代码可读性 # 组件渲染 # 开发环境 # ai # session # ppt # app # cookie # js # html # react

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：实现分段计数的J*aScript定时器：呼吸练习应用

下一篇：html视频标签内部内容是啥_html视频标签回退内容

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

解决 React 中 useEffect 运行两次的问题

常见原因及解决方案

总结