如何解决Styled Components首次加载API颜色数据未生效问题？

核心问题分析 #

你的代码里，getClientInfos 是异步执行的，但 themeClient.ts 里的主题变量是同步初始化的——当模块加载时，Cookie还没被API请求的结果设置，所以首次加载时cor_primaria和cor_secundaria是空值，只有第二次访问时Cookie已存在，颜色才生效。

下面是几种可行的解决方案：

方案一：直接异步获取主题并传递给ThemeProvider（推荐） #

跳过Cookie中转，直接在根组件里获取主题数据，再传递给Styled Components的ThemeProvider，从根源解决时序问题。

1. 改造主题获取逻辑 #

新建一个工具函数来获取主题：

// themeClient.ts
const branco = '#f5f5f5';

export const getClientTheme = async () => {
  try {
    const resp = await fetch(`http://localhost:8000/clientes/${cliente_id}/`, {
      method: "GET",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token_access}`,
      }
    });
    const data = await resp.json();
    
    const primaryColor = decodeURIComponent(data.cor_primaria || '');
    const secundaryColor = decodeURIComponent(data.cor_secundaria || '');
    
    return {
      title: 'themeClient',
      colors: {
        primary: primaryColor,
        secundary: secundaryColor,
        background: `linear-gradient( ${primaryColor}, ${secundaryColor})`,
        text: branco,
      }
    };
  } catch (err) {
    console.error(err);
    // 返回默认主题作为降级
    return {
      title: 'themeClient',
      colors: {
        primary: '#000',
        secundary: '#333',
        background: 'linear-gradient(#000, #333)',
        text: branco,
      }
    };
  }
};

2. 在根组件中加载主题并渲染 #

比如你的App.tsx：

import { useState, useEffect } from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './global';
import { getClientTheme } from './themeClient';

function App() {
  const [theme, setTheme] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadTheme = async () => {
      const clientTheme = await getClientTheme();
      setTheme(clientTheme);
      setLoading(false);
    };
    loadTheme();
  }, []);

  // 加载时可以显示骨架屏或加载动画
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {/* 你的其他组件 */}
    </ThemeProvider>
  );
}

export default App;

方案二：等待Cookie加载完成后渲染应用 #

如果一定要保留Cookie存储（比如需要在其他页面复用），可以在根组件中等待Cookie设置完成后再渲染：

import { useState, useEffect } from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './global';
import theme from './themeClient';
import { getClientInfos, getCookies } from './your-utils'; // 假设getClientInfos和getCookies是单独导出的

function App() {
  const [themeReady, setThemeReady] = useState(false);

  useEffect(() => {
    const checkAndLoadTheme = async () => {
      const cookies = getCookies();
      // 如果Cookie里没有颜色数据，先请求API设置Cookie
      if (!cookies.cor_primaria || !cookies.cor_secundaria) {
        await getClientInfos();
      }
      setThemeReady(true);
    };
    checkAndLoadTheme();
  }, []);

  if (!themeReady) {
    return <div>加载中...</div>;
  }

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {/* 你的其他组件 */}
    </ThemeProvider>
  );
}

方案三：使用Context管理动态主题 #

如果未来需要支持主题切换，用React Context管理主题状态会更灵活：

1. 创建主题Context #

// ThemeContext.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
import { getClientTheme } from './themeClient';

interface ThemeContextType {
  theme: any;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setTheme] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadTheme = async () => {
      const clientTheme = await getClientTheme();
      setTheme(clientTheme);
      setLoading(false);
    };
    loadTheme();
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <ThemeContext.Provider value={{ theme }}>
      <StyledThemeProvider theme={theme}>
        {children}
      </StyledThemeProvider>
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

2. 在根组件中使用 #

import { ThemeProvider } from './ThemeContext';
import GlobalStyle from './global';

function App() {
  return (
    <ThemeProvider>
      <GlobalStyle />
      {/* 你的其他组件 */}
    </ThemeProvider>
  );
}

关于存储方案的建议 #

• Cookie适合需要随请求发送到后端的场景，比如身份验证，但存储主题颜色没必要用它
• localStorage/sessionStorage更适合纯前端的状态存储，比Cookie操作更简单，容量也更大
• 但如果你的主题是每个用户唯一的，其实最好的方式是直接从API获取后使用，不需要客户端存储（除非需要离线支持）

内容的提问来源于stack exchange，提问作者Rafael Vinicius