我不得不将我的代码从我的反应应用程序中使用fetch
更改为require
,以便在电子中使用。由于这样做,我有以下错误:
警告:无法在尚未装入的组件上调用setState。这是一个无操作,但它可能表示您的应用程序中存在错误。相反,直接分配给
this.state
或在App组件中定义具有所需状态的state = {};
类属性。
我理解为什么我会收到此错误,但我很遗憾如何根据我当前的代码修复此问题。我很担心为什么在从fetch
转移到require
时会发生这种情况。
现行代码:
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');
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);
}
原始代码:
constructor(props) {
super(props);
this.state={
config:{
nlinks:[],
},
numPages: null,
pageNumber: 1,
popup: null,
pdf:null,
homelhs:"",
homerhs:"",
currentNlink:0,
currentClink:0,
};
fetch('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,});
});
this.handleSubmit=this.handleSubmit.bind(this);
// this.handleChange=this.handleChange.bind(this);
}
在Render() { }
内我尝试以下内容:
if (this.state.homerhs==='')
{
fs.readFile('resources/app.asar/build/pages/home.rhs.html', 'utf8', function(err, homerhsrequire) {
console.log(err);
console.log(homerhsrequire);
homerhsrequire=homerhsrequire.replace(/src="/g,'src="./pages/');
homerhsrequire=homerhsrequire.replace(/src='/g,"src='./pages/");
//this.setState({homerhs:homerhsrequire});
this.state.homerhs = homerhsrequire;
});
}
但是这会返回:
App.js:708 Uncaught TypeError:无法读取未定义的属性“state”
不要在构造函数中调用this.setState()并将fetch调用移动到componentDidMount生命周期方法。 qazxsw poi
https://reactjs.org/docs/faq-ajax.html在构造函数中不可用 - 在构造函数中使用this.setState
。
最佳做法是在this.state
中使用任何类型的提取。理想情况下,你有一些redux逻辑并在一个动作中进行提取 - 这样你就可以用一些redux状态属性连接你的组件,这些属性是调用使componentDidMount
调用的动作而设置的。