MobX：私はフォームストアのこの構成を使用して検証する別のストア

Question

からストアにデータを取得：https://medium.com/@KozhukharenkoN/react-form-validation-with-mobx-8ce00233ae27

店のフォームがあります：

import { observable, action, computed } from 'mobx' 
 
import FormStore from './FormStore' 
 

 
import UserStore from 'stores/UserStore' 
 

 
class SettingsFormStore extends FormStore { 
 
    @observable 
 
    form = { 
 
    fields: { 
 
     email: { 
 
     value: UserStore.email, 
 
     defaultValue: UserStore.email, 
 
     error: null, 
 
     rule: 'required|email' 
 
     }, 
 
    }, 
 
    meta: { 
 
     isValid: true, 
 
     error: null, 
 
    }, 
 
    } 
 
} 
 

 
export default new SettingsFormStore()

ありユーザ：

import { observable, action, computed } from 'mobx' 
 

 
import * as UserAPI from 'api/UserAPI' 
 

 
class UserStore { 
 
    @observable id 
 
    @observable email 
 

 
    constructor() { 
 
    this.load() 
 
    } 
 

 
    @action setValues(values) { 
 
    this.id = values.id 
 
    this.email = values.email 
 
    } 
 

 
    @action removeValues() { 
 
    this.id = null 
 
    this.email = null 
 
    } 
 

 
    load() { 
 
    UserAPI.getMe() 
 
     .then(result => { 
 
     this.setValues(result.user) 
 
     }) 
 
    } 
 
} 
 

 
export default new UserStore()

私は店からのメールを取得し、フォームのコンポーネントで

：

const email = SettingsFormStore.form.fields.email.value 

しかしUserStore.emailは値を保持しますが、undefied何らかの理由でメールを送信...

Answer 1

reaction(
() => ({ email: UserStore.email, id: UserStore.id }), 
    ({ email, id }) => { 
    this.form.fields.email.value = email 
    ... 
    } 
) 

Answer 2

私は解決策を見つけた：

constructor() { 
    super() 

    reaction(
     () => UserStore.email, 
     email => { 
     this.form.fields.email.value = email 
     } 
    ) 
}