动态响应状态

Question

我目前正在学习React，并且我想用我的WebSockets连接实现一个动态状态系统。所以我做了一个基本的事件监听器系统。这里是我的代码：

class UIEvents { 
    constructor() { 
     this.Events = {}; 
    } 

    BindEvent(name, cb) { 
     if(!this.Events[name]) { 
      this.Events[name] = []; 
     } 

     this.Events[name].push(cb); 
    } 

    CallEvent(name, value) { 
     if(!this.Events[name]) { 
      return console.error("Event is not registred"); 
     } 

     for(var cb of this.Events[name]) { 
      cb(value); 
     } 
    } 
} 

var EventManager = new UIEvents(); 

class Welcome extends React.Component { 
    constructor() { 
     super(); 
     EventManager.BindEvent("name", this.onName) 
    } 

    getInitialState =() => { 
     return { 
      name: "Haha" 
     } 
    } 

    onName = (name) => { 
     console.log("Replace??", name) 
     this.setState({ 
      name: name 
     }) 
    } 

    render() { 
     return <h1>Hello, {this.state.name}</h1>; 
    } 
} 

function App() { 
    return (
    <div> 
     <Welcome /> 
     <Welcome /> 
     <Welcome /> 
    </div> 
); 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

EventManager.CallEvent("name", "Michel") 

不过，我有这样的错误

pen.js:54 Uncaught TypeError: Cannot read property 'name' of null 
    at Welcome.render (pen.js:54) 
    at p._renderValidatedComponentWithoutOwnerOrContext (react.min.js:13) 
    at p._renderValidatedComponent (react.min.js:13) 
    at performInitialMount (react.min.js:13) 
    at p.mountComponent (react.min.js:13) 
    at Object.mountComponent (react.min.js:15) 
    at h.mountChildren (react.min.js:14) 
    at h._createInitialChildren (react.min.js:13) 
    at h.mountComponent (react.min.js:13) 
    at Object.mountComponent (react.min.js:15) 

此代码是应该我不明白什么是错的。

Codepen demo

Answer 1

如果阵营组分基于ES6类，初始状态应在构造函数中设置。

constructor() { 
    super(); 
    EventManager.BindEvent("name", this.onName); 
    this.state = { name: 'Haha' }; 
}