我必须在我的react app中将我的代码从使用fetch
更改为require
以便在电子中使用。自这样做以来,我遇到了以下错误:
警告:无法在尚未安装的组件上调用setState。 这是一项禁止操作的操作,但可能表明您的应用程序中存在错误。 而是直接分配给
this.state
或定义一个state = {};
App组件中具有所需状态的class属性。
我理解为什么为什么,但是我对如何根据当前代码解决此问题一无所知。我也很困惑为什么从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未捕获的TypeError:无法读取的属性“状态” 未定义
答案 0 :(得分:1)
不要在构造函数中调用this.setState()并将获取调用移至componentDidMount lifecylce方法。 https://reactjs.org/docs/faq-ajax.html
答案 1 :(得分:0)
this.setState
在构造函数中不可用-在构造函数中使用this.state
。
最佳做法是在componentDidMount
中使用任何类型的提取。理想情况下,您将具有一些redux逻辑并在操作中进行提取-这样,您可以通过调用操作进行fetch
调用而设置的一些redux状态属性来连接您的组件。 / p>