React TypeScript中使用模板字面量导入JSON文件的报错与数据异常问题

第一个报错的原因 #

import()是异步加载模块的方法，它返回的是一个Promise<any>对象，而setData需要接收的是IData[]类型的数据（或者能生成该类型的函数），直接把Promise传给setData会触发类型不匹配的报错。

使用await后仍无法获取数据的原因 #

动态导入JSON文件时，ES模块会将JSON内容封装在模块对象的default属性里，你直接await priceRangeData拿到的是模块本身，不是JSON数据内容，所以无法正确赋值给state。

正确的实现代码 #

export interface IData {
  "BASE_PRICE": number;
  "TIER": string;
  "LIST_PRICE_MIN": number;
  "LIST_PRICE_MAX": number;
  "DISCOUNT_PART_NUM": Discount; // 建议修正拼写：Discout -> Discount
}

type Discount = {
  "D1RJ6LL": number;
  "D1RJ8LL": number;
  "D1RJALL": number;
};

const [data, setData] = useState<IData[]>([]);

useEffect(() => {
  fetchPrice(lang);
}, [lang]);

const fetchPrice = async (lang: string) => {
  if (lang) {
    // 异步加载JSON模块
    const priceRangeModule = await import(`../locales/${lang}.json`);
    // 提取模块default属性里的JSON数据，同时添加类型断言
    const priceData = priceRangeModule.default as IData[];
    setData(priceData);
  }
};

额外注意点 #

• 确保../locales/${lang}.json的结构和IData[]完全匹配，否则类型断言可能引发运行时错误。
• 若项目是Create React App，默认支持JSON导入；自定义Webpack配置的话，Webpack 5+已默认支持JSON导入，无需额外配置json-loader。

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