解决 React useEffect 双重执行与状态管理陷阱：以会话ID生成为例

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) // 问题点1：初始为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) { // 问题点2：可能在Strict Mode下导致重复执行
      setLoading(true) // 问题点3：可能在useEffect再次执行前未生效
      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> {/* 问题点4：可能无法正确显示 */}
      <Component {...pageProps} />
    </>
  )
}

export default api.withTRPC(MyApp)

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);
  // 优化1: 初始化 loading 状态为 true，表示组件刚开始加载时处于加载中
  const [loading, setLoading] = useState(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}`;
    // 优化2: 在异步操作完成后设置 loading 为 false
    setLoading(false); 
  };

  useEffect(() => {
    // 优化3: 封装获取 sessionId 的逻辑，提高可读性和复用性
    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()) { // 优化4: 如果没有 sessionId，则生成一个新的
      void setSessionId();
    } else {
      // 优化5: 如果已经存在 sessionId，则直接结束 loading 状态，无需执行异步操作
      setLoading(false); 
    }
  }, []); // 依赖项数组为空，表示只在组件挂载时执行一次

  return (
    <>
      <Nav showCart={showCart} setShowCart={setShowCart} />
      {/* 优化6: 只有在 loading 为 true 时才显示 LOADING 文本 */}
      {loading && <h1>LOADING</h1>} 
      <Component {...pageProps} />
    </>
  );
};

export default api.withTRPC(MyApp);