与动态数据

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>; 
    } 
}