Question

我有以下课程

export default class BaseStore {
  @observable model ;

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

在子类中，我将图层添加到可观察模型，例如：

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

MobX可观察动态数据

1 个答案: