[英]Mobx react never update
I'm trying to understand mobx implementation in React. 我试图了解React中的mobx实现。 I used create react app and update default configuration to use decorators.
我使用create react app并更新默认配置以使用装饰器。 Then I created a simple store like this :
然后我创建了一个像这样的简单商店:
EDIT : after Ben Hare (thanks to him !) reply I updated my code like this : 编辑:Ben Hare(感谢他!)回复后,我更新了我的代码,如下所示:
index.js 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 ** ** 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 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;
}
}
The first message is displayed, but component never update when setInterval add message into the store. 显示第一条消息,但是当setInterval将消息添加到存储中时,组件永远不会更新。 Can you help me ?
你能帮助我吗 ?
Works for me: 为我工作:
https://codesandbox.io/s/LgQXNBnNW https://codesandbox.io/s/LgQXNBnNW
Did you see any errors in the browser log or terminal? 您是否在浏览器日志或终端中看到任何错误?
Check my approach please. 请检查我的方法。 Maybe it will help: MobX store:
也许会有所帮助:MobX商店:
import { action, observable, runInAction } from 'mobx'
class DataStore {
@observable data = null
@observable error = false
@observable fetchInterval = null
@observable loading = false
//*Make request to API
@action.bound
fetchInitData() {
const response = fetch('https://poloniex.com/public?command=returnTicker')
return response
}
//*Parse data from API
@action.bound
jsonData(data) {
const res = data.json()
return res
}
//*Get objects key and push it to every object
@action.bound
mapObjects(obj) {
const res = Object.keys(obj).map(key => {
let newData = obj[key]
newData.key = key
return newData
})
return res
}
//*Main bound function that wrap all fetch flow function
@action.bound
async fetchData() {
try {
runInAction(() => {
this.error = false
this.loading = true
})
const response = await this.fetchInitData()
const json = await this.jsonData(response)
const map = await this.mapObjects(json)
const run = await runInAction(() => {
this.loading = false
this.data = map
})
} catch (err) {
console.log(err)
runInAction(() => {
this.loading = false
this.error = err
})
}
}
//*Call reset of MobX state
@action.bound
resetState() {
runInAction(() => {
this.data = null
this.fetchInterval = null
this.error = false
this.loading = true
})
}
//*Call main fetch function with repeat every 5 seconds
//*when the component is mounting
@action.bound
initInterval() {
if (!this.fetchInterval) {
this.fetchData()
this.fetchInterval = setInterval(() => this.fetchData(), 5000)
}
}
//*Call reset time interval & state
//*when the component is unmounting
@action.bound
resetInterval() {
if (this.fetchInterval) {
clearTimeout(this.fetchInterval)
this.resetState()
}
}
}
const store = new DataStore()
export default store
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.