Electron中React转Require后setState报错及fs.readFile操作异常

问题1：切换到require后出现Warning: Can't call setState on a component that is not yet mounted #

为什么会触发这个警告？ #

原来用fetch时，它是异步操作——请求需要时间，等到then回调执行setState时，组件已经走完constructor -> render -> componentDidMount的流程，完成挂载了，这时候调用setState完全合规。

但require是同步加载，你在constructor里处理完JSON就立刻调用this.setState，这时候组件还处于初始化阶段，根本没挂载到DOM上。React的setState是为已挂载组件设计的，在未挂载时调用自然会抛出警告。

修复方案：直接在constructor中初始化state #

constructor里根本不需要用setState，直接把处理好的JSON赋值给state的config字段就行，完全符合React类组件的初始化规范：

constructor(props) { 
  super(props); 
  // 先同步加载并处理配置文件
  const json = require('../public/config.json'); 
  for (var n=0 ; n<json.nlinks.length ; n++) { 
    // 你的所有动态字段处理逻辑完全保留
    json.nlinks[n].state = (n===0?1:0); 
    json.nlinks[n].currentChapter = 0; 
    if (json.nlinks[n].chapters) { 
      if (!json.nlinks[n].test) json.nlinks[n].test={state:0,submitted:0,title:"dummy",questions:[]}; 
      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); 
        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); 
          } 
        } else { 
          json.nlinks[n].chapters[c].sections=[]; 
        } 
      } 
    } else { 
      json.nlinks[n].chapters=[]; 
    } 
  }
  // 直接初始化完整的state对象，无需setState
  this.state={ 
    config: json, // 传入处理好的配置
    numPages: null, 
    pageNumber: 1, 
    popup: null, 
    pdf:null, 
    homelhs:"", 
    homerhs:"", 
    currentNlink:0, 
    currentClink:0, 
  }; 
  this.handleSubmit=this.handleSubmit.bind(this); 
}

问题2：render中fs.readFile报错Cannot read property 'state' of undefined #

问题根源有三个： #

1. this指向丢失：普通匿名函数作为fs.readFile的回调时，this不再指向组件实例，而是回调自身的上下文（严格模式下是undefined），所以访问this.state会报错。
2. render中不能做副作用操作：render的唯一职责是根据state/props渲染UI，异步文件读取属于副作用，放在这里会导致每次重渲染都重复读取文件，甚至引发无限循环。
3. 直接修改state：就算this指向正确，直接this.state.homerhs = homerhsrequire也是错误的——React要求必须通过this.setState修改状态，才能触发组件重渲染。

修复方案：把文件读取移到componentDidMount #

把异步操作放到componentDidMount（组件挂载后只执行一次），用箭头函数绑定this，并用setState修改状态：

componentDidMount() {
  // 仅在组件挂载时读取一次文件
  if (this.state.homerhs === '') { 
    fs.readFile('resources/app.asar/build/pages/home.rhs.html', 'utf8', (err, homerhsrequire) => { 
      console.log(err); 
      console.log(homerhsrequire); 
      const updatedContent = homerhsrequire
        .replace(/src="/g,'src="./pages/')
        .replace(/src='/g,"src='./pages/");
      // 用setState修改状态，触发组件重渲染
      this.setState({ homerhs: updatedContent }); 
    }); 
  }
}

然后删掉render里的这段文件读取逻辑，render只负责根据this.state.homerhs渲染内容即可。

额外提醒 #

如果是在Electron渲染进程中使用fs，记得确保主进程配置中开启了nodeIntegration，或者更安全的做法是通过Electron的IPC机制从主进程读取文件，避免权限问题。

内容的提问来源于stack exchange，提问作者Ben H