使用Flow为值为对象的React Context添加类型报错求助

方案一：严谨型（强制依赖Provider） #

这种方案确保组件必须在Provider包裹下使用，避免意外调用空默认值引发问题：

1. 定义核心类型

// @flow
import React, { createContext, useContext, useState } from 'react';

// 单个收藏资产的类型
type Asset = {
  id: string,
  name: string,
  symbol: string,
};

// Context的完整类型（包含状态和操作方法）
type FavoriteAssetsContextType = {
  favoriteAssets: Array<Asset>,
  addFavorite: (asset: Asset) => void,
  removeFavorite: (assetId: string) => void,
};

2. 创建带可选类型的Context

// 用undefined作为默认值，类型标记为可选，绕过初始化时的属性缺失检查
const FavoriteAssetsContext = createContext<?FavoriteAssetsContextType>(undefined);

3. 封装自定义Hook做类型守卫

// 自定义Hook确保返回完整类型，防止组件拿到undefined
function useFavoriteAssets(): FavoriteAssetsContextType {
  const context = useContext(FavoriteAssetsContext);
  if (!context) {
    throw new Error('useFavoriteAssets必须在FavoriteAssetsProvider内部使用');
  }
  return context;
}

4. 实现Provider组件管理状态

function FavoriteAssetsProvider({ children }: { children: React.Node }) {
  const [favoriteAssets, setFavoriteAssets] = useState<Array<Asset>>([]);

  const addFavorite = (asset: Asset) => {
    setFavoriteAssets(prev => [...prev, asset]);
  };

  const removeFavorite = (assetId: string) => {
    setFavoriteAssets(prev => prev.filter(asset => asset.id !== assetId));
  };

  return (
    <FavoriteAssetsContext.Provider value={{ favoriteAssets, addFavorite, removeFavorite }}>
      {children}
    </FavoriteAssetsContext.Provider>
  );
}

5. 业务组件中使用

function AssetCard({ asset }: { asset: Asset }) {
  const { favoriteAssets, addFavorite, removeFavorite } = useFavoriteAssets();
  const isFavorited = favoriteAssets.some(item => item.id === asset.id);

  return (
    <div>
      <h3>{asset.name}</h3>
      <button onClick={() => isFavorited ? removeFavorite(asset.id) : addFavorite(asset)}>
        {isFavorited ? '取消收藏' : '收藏'}
      </button>
    </div>
  );
}

方案二：宽松型（提供默认空实现） #

如果允许组件在无Provider时使用空默认逻辑，可以直接传入符合类型的完整默认值：

1. 定义类型（同方案一）
2. 创建带完整默认值的Context

// 传入符合类型的空实现，无需忽略或转换类型
const FavoriteAssetsContext = createContext<FavoriteAssetsContextType>({
  favoriteAssets: [],
  addFavorite: () => {},
  removeFavorite: () => {},
});

3. 直接使用或封装Hook

// 直接调用useContext即可
const { favoriteAssets, addFavorite } = useContext(FavoriteAssetsContext);

// 或者封装Hook（可选）
function useFavoriteAssets() {
  return useContext(FavoriteAssetsContext);
}

为什么之前的方法会报错 #

• 直接传空对象{}不符合FavoriteAssetsContextType的类型要求，缺少必填属性，Flow会触发签名验证失败。
• 强行类型转换（如({}: FavoriteAssetsContextType)）会因属性缺失被Flow拦截，因为Flow会校验类型断言的合理性。

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