由于它被封装在电子内,我无法在反应应用中使用fetch。我试图找到一种方法来修改我们要使用的fs.readFile
或require
。根据我的阅读,最好使用require,因为它已经被解析为JSON?
这是我目前的代码:
fetch('./build/config.json')
.then((r) => r.json())
.then((json) =>{
//console.log(json);
//json defines the module NavLink s and their content - so save it to App state
for (var n=0 ; n<json.nlinks.length ; n++)
{
json.nlinks[n].state = (n===0?1:0); // create state field dynamically
json.nlinks[n].currentChapter = 0; // create field dynamically
if (json.nlinks[n].chapters)
{
if (!json.nlinks[n].test) json.nlinks[n].test={state:0,submitted:0,title:"dummy",questions:[]}; // create dummy test dynamically
for (var q=0 ; q<json.nlinks[n].test.questions.length ; q++)
{
json.nlinks[n].test.questions[q].response=0;
json.nlinks[n].test.questions[q].correct=false;
}
for (var c=0 ; c<json.nlinks[n].chapters.length ; c++)
{
json.nlinks[n].chapters[c].state = (c===0?1:0); // create state field dynamically
if (json.nlinks[n].chapters[c].sections)
{
json.nlinks[n].chapters[c].currentSection=0;
for (var s=0 ; s<json.nlinks[n].chapters[c].sections.length ; s++)
{
json.nlinks[n].chapters[c].sections[s].state = (s===0?1:0); // create state field dynamically
}
}
else
{
json.nlinks[n].chapters[c].sections=[];
}
}
}
else
{
json.nlinks[n].chapters=[];
}
}
this.setState({config: json,});
});
基于@Marcin的更新代码答案:
constructor(props) {
super(props);
this.state={
config:{
nlinks:[],
},
numPages: null,
pageNumber: 1,
popup: null,
pdf:null,
homelhs:"",
homerhs:"",
currentNlink:0,
currentClink:0
};
const json = require('../public/config.json');
console.log(json);
//json defines the module NavLink s and their content - so save it to App state
for (var n=0 ; n<json.nlinks.length ; n++)
{
json.nlinks[n].state = (n===0?1:0); // create state field dynamically
json.nlinks[n].currentChapter = 0; // create field dynamically
if (json.nlinks[n].chapters)
{
if (!json.nlinks[n].test) json.nlinks[n].test={state:0,submitted:0,title:"dummy",questions:[]}; // create dummy test dynamically
for (var q=0 ; q<json.nlinks[n].test.questions.length ; q++)
{
json.nlinks[n].test.questions[q].response=0;
json.nlinks[n].test.questions[q].correct=false;
}
for(var c=0 ; c<json.nlinks[n].chapters.length ; c++)
{
json.nlinks[n].chapters[c].state = (c===0?1:0); // create state field dynamically
if (json.nlinks[n].chapters[c].sections)
{
json.nlinks[n].chapters[c].currentSection=0;
for (var s=0 ; s<json.nlinks[n].chapters[c].sections.length ; s++)
{
json.nlinks[n].chapters[c].sections[s].state = (s===0?1:0); // create state field dynamically
}
}
else
{
json.nlinks[n].chapters[c].sections=[];
}
}
}
else
{
json.nlinks[n].chapters=[];
}
}
this.setState({config: json,});
this.handleSubmit=this.handleSubmit.bind(this);
// this.handleChange=this.handleChange.bind(this);
}
我得到的错误:
react.development.js:188警告:无法在尚未挂载的组件上调用setState。这是一个无操作,但它可能表示您的应用程序中存在错误。相反,直接分配给
this.state
或在App组件中定义具有所需状态的state = {};
类属性。
我推荐使用require
。您的代码将更改如下:
const json = require('./build/config.json');
//console.log(json);
//json defines the module NavLink s and their content - so save it to App state
for (var n=0 ; n<json.nlinks.length ; n++)
{
json.nlinks[n].state = (n===0?1:0); // create state field dynamically
json.nlinks[n].currentChapter = 0; // create field dynamically
if (json.nlinks[n].chapters)
{
if (!json.nlinks[n].test) json.nlinks[n].test={state:0,submitted:0,title:"dummy",questions:[]}; // create dummy test dynamically
for (var q=0 ; q<json.nlinks[n].test.questions.length ; q++)
{
json.nlinks[n].test.questions[q].response=0;
json.nlinks[n].test.questions[q].correct=false;
}
for(var c=0 ; c<json.nlinks[n].chapters.length ; c++)
{
json.nlinks[n].chapters[c].state = (c===0?1:0); // create state field dynamically
if (json.nlinks[n].chapters[c].sections)
{
json.nlinks[n].chapters[c].currentSection=0;
for (var s=0 ; s<json.nlinks[n].chapters[c].sections.length ; s++)
{
json.nlinks[n].chapters[c].sections[s].state = (s===0?1:0); // create state field dynamically
}
}
else
{
json.nlinks[n].chapters[c].sections=[];
}
}
}
else
{
json.nlinks[n].chapters=[];
}
}
this.setState({config: json,});
但是,如果您希望继续使用fetch(更好的解决方案,因为它是基于承诺的),您可以导入polyfill,因为nodejs不支持它:fetch polyfill。所有的提取都不必触及,因为它遵循与window.fetch
相同的结构。