前提・実現したいこと
React
+ Mobx
環境でステート管理しているのですが、
Mobx
内のオブジェクトを変更してもコンポーネント側で render()
が走りません。
オブジェクトのプロパティだけ変更してもコンポーネント側で変更を認識できないのでしょうか?
Vue
だと watch
のときに deep
と付けると再帰的に変更をキャッチできたと記憶していますが
同じような設定があるのでしょうか
該当のソースコード
JavaScript
1// Store 2 3import { observable, computed, action } from 'mobx' 4 5class AdminStore { 6 @observable foo = { 7 bar: 'BAR' 8 } 9 10 @action.bound 11 setFoo(val) { 12 this.foo.bar = val 13 }
JavaScript
1// Component 2 3import React from 'react' 4 5import PropTypes from 'prop-types' 6import { inject, observer } from 'mobx-react' 7 8@inject('store') 9@observer 10export default class extends React.Component { 11 static propTypes = { 12 store: PropTypes.object.isRequired, 13 } 14 15 render() { 16 return ( 17 // Store の setFoo() を実行後も変化しない 18 <img src={this.props.store.foo.bar} /> 19 } 20 } 21} 22 23
補足情報(FW/ツールのバージョンなど)
package.json
1{ 2 "react": "^16.2.0", 3 "mobx": "^5.0.3", 4 "mobx-react": "^5.2.5", 5 "mobx-react-devtools": "^6.0.2", 6}
あなたの回答
tips
プレビュー