我需要填充一个下拉选择框,其中包含大量的国家列表。由于国际化,我有一个可用于每种语言的单独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;
};
这些技术都不起作用。如何解决?谢谢!