如何在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;
};

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

- DoneDeal0

---

你遇到了什么错误？ - undefined

尝试在catch块中添加console.log。 - undefined

Answer 1

如果你没有收到任何错误信息，你可以通过res.default获取json数据：

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

如果你遇到了这个错误：

Module ./.json not declared as a System.registerDynamic dependency of

你需要检查你的模块捆绑配置。

其他解决方案：

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. 将静态文件移动到 public 文件夹并使用 fetch 加载数据：

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

- lissettdm