如何在 React 中动态加载 JSON 文件？

Question

我需要用大量国家/地区列表填充选择输入。由于国际化，我为每种可用语言都有一个单独的 json 文件。为了不将它们全部加载到我的组件中，我想只导入与当前区域设置相对应的组件。

这是我写的：

function MyComponent() {
  const [countries, setCountries] = useState([]);
    const { locale } = useLocale();
  
  useEffect(() => {
    import(`../../data/countries/${locale}.json`)
      .then((res) => setCountries(res.countries))
      .catch(_ => null);
  }, []);
  
  return <Select options={countries}/>
  }

我还考虑过在单独的文件中编写自己的钩子：

export const useFetchJSON = (file: string) => {
  const [data, setData] = useState({});
  const { locale } = useLocale();
  const res = require(`../data/${file}/${locale}.json`);
  setData(res);
  return data;
};

这些技术都不起作用。如何解决这个问题？谢谢！

Answer 1

如果没有收到任何错误，您可以使用以下命令获取 json 数据res.default：

 useEffect(() => {
    import(`../../data/countries/${locale}.json`)
      .then((res) => setCountries(res.default.countries))
      .catch(_ => null);
  }, []);

如果您收到此错误：

模块 ./.json 未声明为 System.registerDynamic 依赖项

您应该检查您的模块包配置。

其他解决方案：

1.创建一个对象来存储导入函数：

const LocalesData = {
  en_AU: () => import("../../data/countries/en_AU.json"),
  es_ES: () => import("../../data/countries/es_ES.json"),
  //...
};

useEffect(() => {
  LocalesData[locale]()
    .then(res => console.log(res.default))
    .catch(_ => console.log("res", _));
}, []);

2. 将静态文件移动到公共文件夹并使用 fetch 加载数据：

  useEffect(() => {
    fetch(`${locale}.json`)
      .then(res => res.json())
      .then(res => console.log(res))
      .catch(_ => console.log(_));
  }, []);