Mobxは決して更新されません

Question

私はReactのmobx実装を理解しようとしています。私はcreate react appを使いデコレータを使うためのデフォルト設定を更新しました。

EDIT：ベン・ハレの返信（！彼のおかげで）私はこのように私のコードを更新した後：

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import MessageStore from "./store/messages"; 

ReactDOM.render(<App store={new MessageStore()} />, 
document.getElementById('root')); 

**それから私は、このような単純なストアを作成しましたApp.js **

import React from "react"; 
import { observer } from "mobx-react"; 

@observer 
export default class App extends React.Component { 

    constructor(props) { 
     super(props); 
     this.store = props.store; 
    } 

    render() { 
     return <ul> 
      { this.store.allMessages.map((msg) => { 
       return <li key={msg}>{msg}</li> 
      })} 
     </ul> 
    } 
} 

messages.js

import {action, observable, computed} from "../../node_modules/mobx/lib/mobx"; 

export default class MessageStore { 

    @observable messages = ["My first message"]; 

    constructor() { 
     setInterval(() => { 
      // Add some random messages every second 
      this.addMessage(Math.random()); 
     }, 1000); 
    } 

    @action addMessage(msg) { 
     this.messages.push(msg); 
    } 

    @computed get allMessages() { 
     return this.messages; 
    } 

} 

最初のメッセージは表示されますが、setIntervalがメッセージをストアに追加するとコンポーネントが更新されません。手伝って頂けますか ？私にとって

Answer 1

作品：

https://codesandbox.io/s/LgQXNBnNW

あなたは、ブラウザのログまたは端末にエラーを見ましたか？