解决React中useEffect重复执行的问题-js教程-PHP中文网

解决React中useEffect重复执行的问题

霞舞

发布： 2025-10-13 10:16:39

原创

448人浏览过

解决react中useeffect重复执行的问题

React开发者经常遇到useEffect钩子意外执行两次的情况，尤其是在开发模式下。本文将深入探讨useEffect重复执行的原因，并提供有效的解决方案，确保你的副作用函数按预期运行，同时优化加载状态的管理，避免不必要的数据库操作。

为什么useEffect会执行两次？

在React 18及更高版本中，严格模式（Strict Mode）默认启用，尤其是在开发环境下。严格模式旨在帮助开发者尽早发现潜在问题，它会故意触发某些副作用函数两次，以暴露不纯的渲染和潜在的错误。这通常是useEffect重复执行的罪魁祸首。

如何解决useEffect重复执行问题？

虽然严格模式是导致useEffect重复执行的主要原因，但我们通常不建议直接禁用它，因为它有助于发现潜在的bug。相反，我们应该修改我们的代码，使其能够正确处理重复执行的情况。以下是一些有效的策略：

1. 幂等性操作

确保你的副作用函数是幂等的。这意味着无论函数执行多少次，其结果都应该相同。例如，如果你的useEffect用于向数据库发送请求，确保你的API能够处理重复请求，或者在客户端实现去重逻辑。

2. 利用useRef存储状态

如果useEffect中的副作用是基于某个状态的，你可以使用useRef来存储该状态，并在每次执行副作用之前检查该状态是否已经更新。useRef创建的是一个可以在组件的整个生命周期中保持不变的变量，且修改useRef不会触发组件重新渲染。

3. 移除或调整严格模式

如果确认严格模式是导致问题的唯一原因，并且无法修改副作用函数以适应重复执行，可以考虑暂时移除或调整严格模式的范围。但请记住，这可能会隐藏潜在的问题，因此应谨慎使用。

4. 优化依赖项

检查useEffect的依赖项数组。确保只包含真正需要监听的状态或props。不必要的依赖项会导致useEffect在不必要的时候执行。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

示例代码分析与改进

以下面的代码为例，展示如何解决useEffect重复执行以及加载状态管理的问题：

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

const MyApp: AppType = ({ Component, pageProps }) => {
  const [showCart, setShowCart] = useState(false);
  const [loading, setLoading] = useState(false);

  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(() => {
    if (!loading) {
      setLoading(true);
      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;
        }
      }
      if (!sessionId) {
        void setSessionId();
      }
    }
  }, []);

  return (
    <>
      <Nav showCart={showCart} setShowCart={setShowCart} />
      <h1>{loading && 'LOADING'}</h1>
      <Component {...pageProps} />
    </>
  );
};

export default api.withTRPC(MyApp);

登录后复制

问题分析：

useEffect依赖项为空，导致组件每次渲染都会执行。
loading状态的设置和使用不一致，导致加载状态显示不正确。

改进后的代码：

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

const MyApp: AppType = ({ Component, pageProps }) => {
  const [showCart, setShowCart] = useState(false);
  const [loading, setLoading] = useState(true); // 初始化loading为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()) {
      void setSessionId();
    } else {
      setLoading(false); // 如果sessionId已存在，则设置loading为false
    }
  }, []);

  return (
    <>
      <Nav showCart={showCart} setShowCart={setShowCart} />
      {loading && <h1>LOADING</h1>} {/* 仅当loading为true时显示 */}
      <Component {...pageProps} />
    </>
  );
};

export default api.withTRPC(MyApp);

登录后复制

改进说明：

初始化 loading 状态： 将 loading 的初始状态设置为 true，确保在组件挂载时显示加载状态。
移除不必要的 loading 判断： 在 useEffect 内部移除了 if (!loading) 的判断，因为初始时 loading 已经是 true，并且在获取或创建 sessionId 后会设置为 false。
useEffect 依赖项： 保持依赖项为空数组 []，确保 useEffect 只在组件挂载时执行一次。

总结

useEffect重复执行是React开发中常见的问题，但通过理解其原因并采取适当的措施，可以有效地解决这个问题。关键在于理解严格模式的作用，确保副作用函数的幂等性，并优化依赖项。同时，正确管理加载状态，可以提升用户体验。通过本文提供的策略和示例代码，相信你能更好地掌握useEffect的使用，避免重复执行带来的问题。

以上就是解决React中useEffect重复执行的问题的详细内容，更多请关注php中文网其它相关文章！