與動態數據

Question

我有下面的類

export default class BaseStore { 
    @observable model ; 

    @action updateStore(propertyName, newValue) { 
    this.model[propertyName] = newValue; 
    } 
} 

子類中我添加圖層到觀察的模型，如MobX觀察到：

model.payment.type = 'credit card' 

我的反應成分不會自動呈現時然而，如果我有頂級數據，例如：

model.Type = 'CreditCard' 

我是MobX的新手，閱讀我需要使用map（），但我無法找到解釋如何使用它的體面的例子。

Answer 1

如果您知道model將具有的所有密鑰，則可以使用null值對它們進行初始化，並且observer組件將重新呈現。

例（JSBin）

class BaseStore { 
    @observable model = { 
    type: null 
    }; 

    @action updateStore(propertyName, newValue) { 
    this.model[propertyName] = newValue; 
    } 
} 

const baseStore = new BaseStore(); 

@observer 
class App extends Component { 
    componentDidMount() { 
    setTimeout(() => baseStore.model.type = 'CreditCard', 2000); 
    } 

    render() { 
    return <div> { baseStore.model.type } </div>; 
    } 
} 

如果你不知道的model所有鍵事先，你可以使用map像你說：

例（JSBin）

class BaseStore { 
    model = observable.map({}); 

    @action updateStore(propertyName, newValue) { 
    this.model.set(propertyName, newValue); 
    } 
} 

const baseStore = new BaseStore(); 

@observer 
class App extends Component { 
    componentDidMount() { 
    this.interval = setInterval(() => { 
     const key = Math.random().toString(36).substring(7); 
     const val = Math.random().toString(36).substring(7); 
     baseStore.updateStore(key, val); 
    }, 1000); 
    } 

    componentWillUnmount() { 
    clearInterval(this.interval); 
    } 

    render() { 
    return <div> 
     { baseStore.model.entries().map(e => <div> {`${e[0]} ${e[1]}` } </div>) } 
    </div>; 
    } 
}