2
これはしばらくの間遊んでいて、それが不可能なのか、ES6、React、MobXの基本的なものが欠けているのか分かりません。mobx-react観測可能なストアを作成する
私は以下のように別のファイルにmobxストアを持っています。
import { observable, action } from 'mobx';
export default class Store {
@observable data = [];
@action getAll(){
this.data = [{
itemTitle: 'Item One'
},{
itemTitle: 'Item Two'
}]
return this.data
}
@action pushItem(item){
this.data.push(item)
}
addAfter5Secs(){
setTimeout(() => {
console.log('Item Added')
this.pushItem({
itemTitle: 'Item Two'
})}, 5000)
}
constructor() {
console.log('Store Created')
this.getAll();
this.addAfter5Secs()
}
}
次に、私はそれをビューにインポートし、その時点でそのストアのインスタンスを作成します。
import React from "react";
import { List, Button } from 'semantic-ui-react';
import { observer, inject } from 'mobx-react';
import Store from '../Data/Store';
import DevTools from 'mobx-react-devtools';
const dataItems = new Store
@observer
export default class ScriptsHome extends React.Component {
render() {
const items = observer(dataItems)
return (
<List>
{items.data.map((reg, key) => {
return(
<List.Item key={key}>
<Button content={reg.itemTitle}/>
</List.Item>)
})}
<DevTools />
</List>
);
}
}
ルートコンポーネントからプロバイダーに渡したり、エクスポートで「new」キーワードを使用してインスタンスを作成したりすることは望ましくありません。私は実際に数十の店舗を持っているので、私はそれらをビューによって必要に応じて作成したいだけです。
上記のコードは最初の2つのアイテムをレンダリングし、3番目のアイテムは5秒後にのみストアに追加されますが、コンポーネントが自動的にレンダリングされないためアイテムは表示されません。私はレンダー機能を強制的に起動すると、それが表示されます。
私はこのビューを呼び出すためにルータを使用していますので多分それも問題ですか？
私はちょうどMobx、反応などを学んでいるので、どんな助けもありがとうございます。すべての例はちょうど1つか2つの店を使用するようである。