Reactjs Can'；t调用setState

我不得不在react应用程序中将代码从使用

fetch

更改为

require

，以便在electron中使用。由于这样做，我得到了以下错误：

警告：无法对尚未安装的组件调用setState。 这是一个no-op，但它可能表示应用程序中存在错误。 相反，直接分配给

this.state

，或者定义一个

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);

    }

然而，这返回：

App.js:708未捕获类型错误：无法读取的属性“状态”
未定义

不要在构造函数中调用此.setState（），并将获取调用移动到componentDidMount生命周期方法。
不要在构造函数中调用this.setState（），而是将获取调用移动到componentDidMount生命周期方法。
此.setState
在构造函数中不可用-请在构造函数中使用
此.state

最佳实践是在
componentDidMount
中使用任何类型的获取。理想情况下，您应该有一些redux逻辑，并在一个操作中执行抓取操作-通过这种方式，您可以将组件与一些redux状态属性连接起来，这些属性是调用执行
fetch
调用的操作后设置的。
this.setState
在构造函数中不可用-在构造器

最佳实践是在
componentDidMount
中使用任何类型的获取。理想情况下，您应该有一些redux逻辑，并在一个操作中执行抓取操作——这样，您就可以使用一些redux状态属性将组件连接起来，这些属性是在调用执行
fetch
调用的操作后设置的。
您可以共享完整的组件代码吗？我们需要它来给你一个答案。在任何情况下，当您在构造器中时，您应该直接分配给
this.state
，而不是使用
this.setState
添加gist文件链接。您可以共享完整的组件代码吗？我们需要它来给你一个答案。在任何情况下，当您在构造函数中时，应该直接将
分配给this.state
，而不是使用
this.setState
将链接添加到gist文件我有一个函数（
fetchHTML
），该函数位于与我的
componentDidMount
相同的组件中，该组件中有一个fetch。但是，我无法将此函数移动到
componentDidMount
，而且我不熟悉redux。是否有一种方法可以将
状态
数据传回
componentDidMount
，但将我的
fs.readFile
保存在它自己的函数中
fetchHTML
？您可以通过这个.state访问componentDidMount中的状态。这是否回答了问题？我刚刚尝试过这样做，但是我得到了：
App.js:774 Uncaught TypeError:无法读取未定义的属性“state”
我已经用上面提到的示例更新了问题我有一个函数（
fetchHTML
）在与my
componentDidMount
相同的组件中，该组件中有一个fetch。但是，我无法将此函数移动到
componentDidMount
，而且我不熟悉redux。是否有一种方法可以将
状态
数据传回
componentDidMount
，但将我的
fs.readFile
保存在它自己的函数中
fetchHTML
？您可以通过这个.state访问componentDidMount中的状态。这是否回答了问题？我刚刚尝试过这样做，但是我得到了：
App.js:774 Uncaught TypeError:无法读取未定义的属性“state”
我已经用上面提到的示例更新了问题
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);

}

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;
            });       

          }