React Consumer找不到Provider的四种处理方案

// 创建 Context 时指定默认值
const MyContext = React.createContext('default value');

// 没有 Provider 时，Consumer 会使用 'default value'
function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>Value: {value}</div>} {/* 显示: Value: default value */}
    </MyContext.Consumer>
  );
}

import React from 'react';

// 创建带默认值的 Context
const UserContext = React.createContext({
  name: 'Unknown User',
  role: 'guest',
  isLoggedIn: false
});

// 没有 Provider 包装的组件
function UserProfile() {
  return (
    <UserContext.Consumer>
      {user => (
        <div>
          <h2>User Profile</h2>
          <p>Name: {user.name}</p>
          <p>Role: {user.role}</p>
          <p>Status: {user.isLoggedIn ? 'Logged In' : 'Guest'}</p>
        </div>
      )}
    </UserContext.Consumer>
  );
}

// 直接使用，没有 Provider
function App() {
  return (
    <div>
      <UserProfile /> {/* 使用默认值 */}
    </div>
  );
}

import React from 'react';

// 1. 定义完整的默认值对象
const defaultSettings = {
  theme: 'light',
  language: 'zh-CN',
  fontSize: 14,
  notifications: true,
  userPreferences: {
    autoSave: true,
    darkMode: false
  }
};

// 2. 创建 Context 时提供有意义的默认值
const AppSettingsContext = React.createContext(defaultSettings);

// 3. 创建 Provider 组件
function AppSettingsProvider({ children, settings = {} }) {
  // 合并默认值和传入的设置
  const contextValue = {
    ...defaultSettings,
    ...settings,
    userPreferences: {
      ...defaultSettings.userPreferences,
      ...settings.userPreferences
    }
  };

  return (
    <AppSettingsContext.Provider value={contextValue}>
      {children}
    </AppSettingsContext.Provider>
  );
}

// 4. 使用 Consumer 的组件
function SettingsDisplay() {
  return (
    <AppSettingsContext.Consumer>
      {settings => (
        <div style={{ 
          padding: '20px', 
          backgroundColor: settings.userPreferences.darkMode ? '#333' : '#fff',
          color: settings.userPreferences.darkMode ? '#fff' : '#333'
        }}>
          <h3>Application Settings</h3>
          <ul>
            <li>Theme: {settings.theme}</li>
            <li>Language: {settings.language}</li>
            <li>Font Size: {settings.fontSize}px</li>
            <li>Notifications: {settings.notifications ? 'On' : 'Off'}</li>
            <li>Auto Save: {settings.userPreferences.autoSave ? 'Enabled' : 'Disabled'}</li>
          </ul>
        </div>
      )}
    </AppSettingsContext.Consumer>
  );
}

// 5. 使用示例
function App() {
  return (
    <div>
      {/* 有 Provider 的情况 */}
      <AppSettingsProvider settings={{ theme: 'dark', fontSize: 16 }}>
        <SettingsDisplay />
      </AppSettingsProvider>
      
      {/* 没有 Provider 的情况 - 使用默认值 */}
      <SettingsDisplay />
    </div>
  );
}

import React from 'react';

// 创建 Context
const AuthContext = React.createContext(null);

// 高阶组件：检查 Provider 是否存在
function withAuthProviderCheck(WrappedComponent, context) {
  return function AuthCheckedComponent(props) {
    return (
      <context.Consumer>
        {value => {
          // 检查是否找到了 Provider
          if (value === null) {
            return (
              <div style={{ 
                padding: '20px', 
                border: '2px solid #ff6b6b', 
                backgroundColor: '#ffeaea',
                borderRadius: '8px'
              }}>
                <h3>⚠️ Authentication Provider Missing</h3>
                <p>
                  This component requires an AuthProvider. 
                  Please wrap your application with AuthProvider.
                </p>
                <details style={{ marginTop: '10px' }}>
                  <summary>Debug Information</summary>
                  <pre style={{ 
                    backgroundColor: '#f8f9fa', 
                    padding: '10px', 
                    borderRadius: '4px',
                    fontSize: '12px'
                  }}>
                    Component: {WrappedComponent.name}
                    Context: {context.displayName || 'Anonymous Context'}
                  </pre>
                </details>
              </div>
            );
          }
          
          return <WrappedComponent {...props} />;
        }}
      </context.Consumer>
    );
  };
}

// 用户信息组件
function UserInfo() {
  return (
    <AuthContext.Consumer>
      {auth => (
        <div style={{ padding: '20px', border: '1px solid #ddd' }}>
          <h3>User Information</h3>
          {auth ? (
            <div>
              <p>Username: {auth.username}</p>
              <p>Email: {auth.email}</p>
              <p>Role: {auth.role}</p>
            </div>
          ) : (
            <p>No authentication data available</p>
          )}
        </div>
      )}
    </AuthContext.Consumer>
  );
}

// 使用高阶组件包装
const ProtectedUserInfo = withAuthProviderCheck(UserInfo, AuthContext);

// Auth Provider 组件
function AuthProvider({ children, authData }) {
  return (
    <AuthContext.Provider value={authData}>
      {children}
    </AuthContext.Provider>
  );
}

// 使用示例
function App() {
  const mockAuthData = {
    username: 'john_doe',
    email: 'john@example.com',
    role: 'admin'
  };

  return (
    <div>
      <h2>With Provider:</h2>
      <AuthProvider authData={mockAuthData}>
        <ProtectedUserInfo />
      </AuthProvider>
      
      <h2>Without Provider:</h2>
      <ProtectedUserInfo /> {/* 显示错误信息 */}
    </div>
  );
}

import React, { useContext, useDebugValue } from 'react';

// 创建 Context
const FeatureFlagsContext = React.createContext(null);

// 自定义 Hook 带有 Provider 检查
function useFeatureFlags() {
  const context = useContext(FeatureFlagsContext);
  
  useDebugValue(context ? 'FeatureFlags: Available' : 'FeatureFlags: Using Defaults');
  
  if (context === null) {
    // 返回安全的默认值
    return {
      isEnabled: (flag) => false,
      getAllFlags: () => ({}),
      hasProvider: false,
      error: 'FeatureFlagsProvider is missing. All features are disabled by default.'
    };
  }
  
  return {
    ...context,
    hasProvider: true,
    error: null
  };
}

// 创建 Provider
function FeatureFlagsProvider({ flags = {}, children }) {
  const value = {
    isEnabled: (flagName) => Boolean(flags[flagName]),
    getAllFlags: () => ({ ...flags }),
    flags
  };

  return (
    <FeatureFlagsContext.Provider value={value}>
      {children}
    </FeatureFlagsContext.Provider>
  );
}

// 使用自定义 Hook 的组件
function FeatureComponent({ featureName, children }) {
  const { isEnabled, hasProvider, error } = useFeatureFlags();
  
  if (!isEnabled(featureName)) {
    return (
      <div style={{ 
        padding: '15px', 
        margin: '10px 0',
        backgroundColor: hasProvider ? '#fff3cd' : '#f8d7da',
        border: `1px solid ${hasProvider ? '#ffeaa7' : '#f5c6cb'}`,
        borderRadius: '4px'
      }}>
        <p>
          <strong>
            {hasProvider ? '🔒 Feature Disabled' : '⚠️ Provider Missing'}
          </strong>
        </p>
        <p>Feature "{featureName}" is not available.</p>
        {error && (
          <p style={{ fontSize: '0.9em', color: '#721c24' }}>
            {error}
          </p>
        )}
      </div>
    );
  }
  
  return children;
}

// 功能开关显示组件
function FeaturesDashboard() {
  const { getAllFlags, hasProvider } = useFeatureFlags();
  const allFlags = getAllFlags();
  
  return (
    <div style={{ padding: '20px' }}>
      <h2>Features Dashboard</h2>
      <div style={{ 
        padding: '10px', 
        backgroundColor: hasProvider ? '#d1ecf1' : '#f8d7da',
        border: `1px solid ${hasProvider ? '#bee5eb' : '#f5c6cb'}`,
        borderRadius: '4px',
        marginBottom: '20px'
      }}>
        Provider Status: {hasProvider ? '✅ Connected' : '❌ Missing'}
      </div>
      
      <div>
        <h3>Available Features:</h3>
        {Object.entries(allFlags).map(([flag, enabled]) => (
          <div key={flag} style={{ 
            padding: '8px', 
            margin: '5px 0',
            backgroundColor: enabled ? '#d4edda' : '#f8d7da',
            border: `1px solid ${enabled ? '#c3e6cb' : '#f5c6cb'}`,
            borderRadius: '4px'
          }}>
            {flag}: {enabled ? '✅ Enabled' : '❌ Disabled'}
          </div>
        ))}
        
        {Object.keys(allFlags).length === 0 && (
          <p>No features configured</p>
        )}
      </div>
    </div>
  );
}

// 使用示例
function App() {
  const featureFlags = {
    'new-ui': true,
    'beta-features': false,
    'export-functionality': true,
    'advanced-settings': false
  };

  return (
    <div>
      {/* 有 Provider 的情况 */}
      <FeatureFlagsProvider flags={featureFlags}>
        <FeaturesDashboard />
        <FeatureComponent featureName="new-ui">
          <div style={{ padding: '15px', backgroundColor: '#e8f5e8', margin: '10px 0' }}>
            <h3>New UI Feature</h3>
            <p>This is the exciting new UI!</p>
          </div>
        </FeatureComponent>
        
        <FeatureComponent featureName="beta-features">
          <div>Beta features content (this won't show)</div>
        </FeatureComponent>
      </FeatureFlagsProvider>
      
      <hr style={{ margin: '40px 0' }} />
      
      {/* 没有 Provider 的情况 */}
      <FeaturesDashboard />
      <FeatureComponent featureName="new-ui">
        <div>This won't show without provider</div>
      </FeatureComponent>
    </div>
  );
}

import React, { useContext, useEffect, useRef } from 'react';

// 创建带检测功能的 Context
const AnalyticsContext = React.createContext(undefined);

// 开发环境下的严格模式 Hook
function useStrictContext(context, contextName = 'Unknown') {
  const contextValue = useContext(context);
  const hasReported = useRef(false);
  
  useEffect(() => {
    // 只在开发环境下检查，且只报告一次
    if (process.env.NODE_ENV === 'development' && 
        contextValue === undefined && 
        !hasReported.current) {
      
      hasReported.current = true;
      
      console.warn(
        `🚨 Context Provider Missing: ${contextName}\n` +
        `A component is trying to use ${contextName} but no Provider was found in the component tree.\n` +
        `This might cause unexpected behavior in your application.\n` +
        `Please make sure to wrap your components with the appropriate Provider.`
      );
      
      // 在开发环境中显示视觉警告
      if (typeof window !== 'undefined') {
        setTimeout(() => {
          const warningElement = document.createElement('div');
          warningElement.style.cssText = `
            position: fixed;
            top: 10px;
            right: 10px;
            background: #ff6b6b;
            color: white;
            padding: 15px;
            border-radius: 5px;
            z-index: 10000;
            max-width: 400px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            font-family: system-ui, sans-serif;
            font-size: 14px;
          `;
          warningElement.innerHTML = `
            <strong>⚠️ Context Provider Missing</strong>

            <small>${contextName} - Check browser console for details</small>
          `;
          document.body.appendChild(warningElement);
          
          // 自动移除警告
          setTimeout(() => {
            if (document.body.contains(warningElement)) {
              document.body.removeChild(warningElement);
            }
          }, 5000);
        }, 100);
      }
    }
  }, [contextValue, contextName]);
  
  return contextValue;
}

// Analytics Provider
function AnalyticsProvider({ children, trackingId, enabled = true }) {
  const contextValue = {
    trackEvent: (eventName, properties = {}) => {
      if (enabled && trackingId) {
        console.log(`[Analytics] Tracking: ${eventName}`, properties);
        // 实际项目中这里会调用 analytics SDK
      }
    },
    trackPageView: (pageName) => {
      if (enabled && trackingId) {
        console.log(`[Analytics] Page View: ${pageName}`);
      }
    },
    isEnabled: enabled,
    hasValidConfig: !!trackingId
  };

  return (
    <AnalyticsContext.Provider value={contextValue}>
      {children}
    </AnalyticsContext.Provider>
  );
}

// 使用严格 Context 的组件
function TrackedButton({ onClick, eventName, children, ...props }) {
  const analytics = useStrictContext(AnalyticsContext, 'AnalyticsContext');
  
  const handleClick = (e) => {
    // 调用原始 onClick
    onClick?.(e);
    
    // 跟踪事件
    if (analytics) {
      analytics.trackEvent(eventName || 'button_click', {
        buttonText: typeof children === 'string' ? children : 'Unknown',
        timestamp: new Date().toISOString()
      });
    } else {
      // 降级处理：在控制台记录
      console.log(`[Analytics Fallback] Event: ${eventName || 'button_click'}`);
    }
  };
  
  return (
    <button onClick={handleClick} {...props}>
      {children}
    </button>
  );
}

// 页面视图跟踪组件
function TrackedPage({ pageName, children }) {
  const analytics = useStrictContext(AnalyticsContext, 'AnalyticsContext');
  
  useEffect(() => {
    if (analytics) {
      analytics.trackPageView(pageName);
    } else {
      console.log(`[Analytics Fallback] Page View: ${pageName}`);
    }
  }, [analytics, pageName]);
  
  return children;
}

// 使用示例
function App() {
  return (
    <div>
      {/* 有 Provider 的情况 */}
      <AnalyticsProvider trackingId="UA-123456789-1" enabled={true}>
        <TrackedPage pageName="Home Page">
          <div>
            <h2>Home Page with Analytics</h2>
            <TrackedButton eventName="cta_click" onClick={() => alert('Clicked!')}>
              Tracked Button
            </TrackedButton>
          </div>
        </TrackedPage>
      </AnalyticsProvider>
      
      <hr style={{ margin: '40px 0' }} />
      
      {/* 没有 Provider 的情况 - 会显示警告但不会崩溃 */}
      <TrackedPage pageName="Standalone Page">
        <div>
          <h2>Standalone Page (No Provider)</h2>
          <TrackedButton eventName="standalone_click" onClick={() => alert('Standalone!')}>
            Standalone Button
          </TrackedButton>
        </div>
      </TrackedPage>
    </div>
  );
}

// 1. 总是提供有意义的默认值
const SafeContext = React.createContext({
  // 提供完整的默认状态
  data: null,
  loading: false,
  error: null,
  actions: {
    // 提供安全的空函数
    fetch: () => console.warn('No provider found'),
    update: () => console.warn('No provider found')
  }
});

// 2. 创建 Provider 包装组件
function AppProviders({ children }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <FeatureFlagsProvider>
          <ErrorBoundary>
            {children}
          </ErrorBoundary>
        </FeatureFlagsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

// 3. 在应用根组件中使用
function App() {
  return (
    <AppProviders>
      <MyApp />
    </AppProviders>
  );
}

class ContextErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorInfo: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
    console.error('Context Error:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '20px', border: '2px solid #ff6b6b' }}>
          <h3>Context Configuration Error</h3>
          <p>There's an issue with context providers in this component tree.</p>
          <details>
            <summary>Error Details</summary>
            <pre>{this.state.errorInfo?.componentStack}</pre>
          </details>
        </div>
      );
    }
    
    return this.props.children;
  }
}

// 测试工具：模拟缺少 Provider 的情况
function createMissingProviderTest(Component, contextName) {
  return function MissingProviderTest() {
    return (
      <div data-testid="missing-provider-test">
        <Component />
      </div>
    );
  };
}

// 在测试中验证降级行为
describe('Context Missing Handling', () => {
  test('should use default values when provider is missing', () => {
    const { getByText } = render(<UserProfile />);
    expect(getByText('Unknown User')).toBeInTheDocument();
  });
  
  test('should show fallback UI when provider is missing', () => {
    const { getByText } = render(<ProtectedUserInfo />);
    expect(getByText('Authentication Provider Missing')).toBeInTheDocument();
  });
});