Измените использование fetch на fs.readFile или потребуйте

Question

Я не могу использовать 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);

}

Ошибка, которую я получаю:

реаги.development.js: 188 Предупреждение: не удается вызвать setState для компонента, который еще не былустановлен.Это не работает, но это может указывать на ошибку в вашем приложении.Вместо этого присвойте this.state напрямую или определите свойство класса state = {}; с требуемым состоянием в компоненте приложения.

Answer 1

Я рекомендую использовать 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.