如何在react应用上动态加载JSON文件
如何在react应用上动态加载JSON文件
提问于 2021-03-16 16:55:36
我想在react应用程序中动态加载一个JSON设置文件。
我使用的是webpack，当我对文件执行import操作时：
import appSettings from './appSettings.json';或要求它：
const appSettings = require('./appSettings.json');它编译json，并且不会动态加载它(例如，在运行时不可更改)。
有人能帮上忙吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-16 23:18:37
最后，我所做的是在我的应用程序的根目录中加载带有axios的文件。
const [appSettings, setAppSettings] = React.useState<any>(null);
React.useEffect(() => {
axios.get('./appSettings.json').then((response: any) => {
setAppSettings(response.data);
});
}, [appSettings && appSettings.data]);
return (
appSettings &&
appSettings.baseUrl && (
<Layout className={styles.root}>
<MyApp appSettings={appSettings} />
</Layout>
)Stack Overflow用户
发布于 2021-03-16 17:09:31
您应该考虑添加useEffect挂钩，以便在json中有更改时重新呈现页面
import appSettings from './appSettings.json';
import {useEffect} from 'react';
useEffect(()=>{
//code to run whe the json has loaded
},[appSettings])页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66651896
复制相关文章
相似问题
腾讯云开发者
