Javascript Electron：从main.js更改反应组件状态_Javascript_Node.js_Reactjs_Electron

Javascript Electron：从main.js更改反应组件状态

javascript node.js reactjs electron

Javascript Electron：从main.js更改反应组件状态,javascript,node.js,reactjs,electron,Javascript,Node.js,Reactjs,Electron,我有一个包含以下文件的电子应用程序： index.js browserwindow.html browserwindow.js（从browserwindow.jsx编译） index.js是启动Electron应用程序时运行的主Electron/节点进程browserwindow.html在guiWindow中呈现，browserwindow.js管理此窗口。（请参阅下面的文件。）我想要的是从主Electron进程发送一条ipc消息到browserwindow.js，然后更新React组件

我有一个包含以下文件的电子应用程序：

```
index.js
```
```
browserwindow.html
```
```
browserwindow.js
```
（从
```
browserwindow.jsx
```
编译）

index.js

是启动Electron应用程序时运行的主Electron/节点进程

browserwindow.html

在

guiWindow

中呈现，

browserwindow.js

管理此窗口。（请参阅下面的文件。）

我想要的是从主Electron进程发送一条ipc消息到

browserwindow.js

，然后更新React组件状态。但当我使用下面文件中的代码并运行Electron应用程序时，状态不会改变

index.js

const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;
const app = electron.app;
const url = require('url');
const ipc = electron.ipcMain;


app.on('ready', function(){

  // Make window
  var guiWindow;

  // Set size and do not immediately show
  guiWindow = new BrowserWindow({
    width: 800,
    height: 780,
    show: false
  });

  // Load browserwindow.html in the guiWindow
  guiWindow.loadURL('file://' + __dirname + '/browserwindow.html');

  // Show the window when the .html file is loaded
  guiWindow.once('ready-to-show', function(){
    guiWindow.show();
  });

  // Send an ipc after 3 seconds
  setInterval(function(){
    guiWindow.webContents.send('message', {msg: 'Hello World!'});
  }, 3000);

});

var electron = require('electron');
var shell = electron.shell;
var ipc = electron.ipcRenderer;

class MainInterface extends React.Component {

  constructor(props, contect){
    super(props);
    this.state = {
      testValue: 'Initial state'
    };
  };

  componentDidMount(){ // When the document is rendered

    ipc.on('message', function(event, data){ // When the message is received...
      console.log('Message received');
      this.setState({testValue: 'It worked!'}); // ... change the state of this React component
    });

  }

  render(){
    return (
      <h1>{ this.state.testValue }</h1>
    );
  }

}

ReactDOM.render(
  <MainInterface />,
  document.getElementById('mainInterface')
);

browserwindow.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page</title>
  </head>
  <body>
    <!-- The div that React uses: -->
    <div id="mainInterface"></div>
    <script src="react-0.14.3.js"></script>
    <script src="react-dom-0.14.3.js"></script>
    <script src="browserwindow.js"></script>
  </body>
</html>

在Javascript控制台中，我得到以下错误：

Uncaught TypeError: this.setState is not a function
    at EventEmitter.<anonymous> (file:///C:/Users/<file path to the project on my computer>/testproject/browserwindow.js:20:12)
    at emitTwo (events.js:106:13)
    at EventEmitter.emit (events.js:194:7)

未捕获类型错误：this.setState不是函数
在黄昏时分。(file:///C:/Users//testproject/browserwindow.js:20:12)
两点钟（events.js:106:13）
在EventEmitter.emit（events.js:194:7）

如何解决此问题

（对于某些背景，我正在制作一个电子应用程序，它应该通过MQTT接收消息，并根据接收到的消息更新屏幕上的元素。）

您的

此

指向与组件实际不同的上下文。您需要将代码更改为

componentDidMount（）{
//当呈现文档时。
const self=这个；
ipc.on（'message'，函数（事件，数据）{
//当收到消息时。。。
console.log（“收到消息”）；
//…更改此反应组件的状态。
setState（{testValue:'It worked！'}）；
});
}

或者您可以用

（）=>{}替换函数（）
回调

因为第一个选项更改了执行的上下文。

您是否将

React

导入

browserwindow.js

？@JosanIracheta我将其导入

browserwindow.html

中，并在

之前导入

。注释

ipc.on（'message'…

并查看此.setState是否在其外部工作