为何在useEffect中使用本地JSON数据？附TS类型错误排查

• 模拟异步请求场景：本地JSON可以替代后端API返回的数据，让组件逻辑和真实接口请求的场景对齐，后续替换成真实接口时无需大幅修改代码。
• 适配组件生命周期：useEffect会在组件挂载完成后执行，确保数据处理逻辑在组件DOM渲染后触发，避免初始渲染时因数据未就绪导致的异常，尤其适合需要对数据做预处理的场景。
• 精准控制加载时机：通过useEffect的依赖数组，可以在特定props或状态变化时重新加载数据，避免不必要的重复执行，优化组件性能。

错误原因 #

报错核心是wineData的结构与你定义的WineData类型完全不匹配：

• JSON中的键名（如Alcohol、Color intensity）与WineData要求的小写下划线格式（alcohol、color_intensity）不一致；
• JSON数据缺少WineData类型中必填的wine_type属性。

解决方案 #

1. 转换数据结构（推荐）

编写一个转换函数，将原始JSON数据映射为符合WineData类型的结构：

// 先确保WineData类型定义正确
interface WineData {
  alcohol: number;
  malic_acid: number;
  ash: number;
  alcalinity_of_ash: number;
  magnesium: number;
  total_phenols: number;
  flavanoids: number;
  nonflavanoid_phenols: number;
  proanthocyanins: string;
  color_intensity: number;
  hue: number;
  od280_od315_of_diluted_wines: number;
  wine_type: number;
}

// 转换函数
const transformWineData = (rawData: typeof wineData): WineData[] => {
  return rawData.map(item => ({
    alcohol: item.Alcohol,
    malic_acid: item["Malic Acid"],
    ash: item.Ash,
    alcalinity_of_ash: item["Alcalinity of ash"],
    magnesium: item.Magnesium,
    total_phenols: item["Total phenols"],
    flavanoids: item.Flavanoids,
    nonflavanoid_phenols: item["Nonflavanoid phenols"],
    proanthocyanins: item.Proanthocyanins,
    color_intensity: item["Color intensity"],
    hue: item.Hue,
    od280_od315_of_diluted_wines: item["OD280/OD315 of diluted wines"],
    wine_type: item.Unknown // 将JSON中的Unknown字段映射为wine_type
  }));
};

// 在useEffect中使用转换后的数据
useEffect(() => {
  setData(transformWineData(wineData));
}, []);

2. 类型断言（临时方案，不推荐）

如果确认原始数据结构与WineData仅存在命名差异且数据完整，可以用类型断言跳过检查，但这种方式会失去TypeScript的类型保护，存在潜在bug风险：

useEffect(() => {
  setData(wineData as unknown as WineData[]);
}, []);

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