Mobx反應永不更新

我試圖瞭解React中的mobx實現。我使用create react app並更新默認配置以使用裝飾器。然後，我創建了一個簡單的店是這樣的：Mobx反應永不更新

編輯：後奔兔（！感謝他）回覆我更新了我這樣的代碼：

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將消息添加到存儲區時組件永遠不會更新。你可以幫我嗎？

來源

2017-06-21 Thibault Walle

你是如何渲染你的簡單組件？在mobx中，您需要將商店作爲道具傳遞給@observer，但不能在渲染內部訪問它。這不會引發改變。 –

感謝回覆@BenHare我編輯了我的問題 –

工作對我來說：

https://codesandbox.io/s/LgQXNBnNW

你看到在瀏覽器日誌或終端的任何錯誤？

來源

2017-06-21 12:26:34 mweststrate

感謝您的回答，並花時間測試我的代碼！它是有效的，所以我檢查了你的代碼和我的差異，我的錯誤是這一個：我被我的IDE引誘！我用「../../node_modules/mobx/lib/mobx」替換了「import {action，observable，computed};」通過「來自」mobx「的import {action，observable，computed};」它工作正常 –

Mobx反應永不更新

回答

相關問題