为什么我对(mobx)extendObservable的调用不会触发重新渲染？

Question

这是代码 - 非常确定它是关于extendObservable的东西,我只是没有得到,但现在已经盯着它看了很长一段时间.当addSimpleProperty运行时,它似乎更新了对象,但它不会触发渲染.

const {observable, action, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
class TestStore {
    @observable mySimpleObject = {};

    @action addSimpleProperty = (value) => {
        extendObservable(this.mySimpleObject, {newProp: value});
    }
}

@observer
class MyView extends Component {
constructor(props) {
    super(props);
    this.handleAddSimpleProperty = this.handleAddSimpleProperty.bind(this);
}
handleAddSimpleProperty(e) {
    this.props.myStore.addSimpleProperty("newpropertyvalue");
}

render() { 
    var simpleObjectString =JSON.stringify(this.props.myStore.mySimpleObject);
    return (<div>     
       <h3> Simple Object</h3>
       {simpleObjectString}
       <br/>
       <button onClick={this.handleAddSimpleProperty}>Add Simple Property</button>
    </div>);
    }
}

const store = new TestStore();
ReactDOM.render(<MyView myStore={store} />,    document.getElementById('mount'));
store.mySimpleObject = {prop1: "property1", prop2: "property2"};

Answer 1

此问题在文档的常见陷阱和最佳实践部分中提出：

MobX 可观察对象不会检测之前未声明为可观察的属性分配或对其做出反应。因此 MobX 可观察对象充当具有预定义键的记录。您可以使用 extendObservable(target, props)向对象引入新的可观察属性。然而对象迭代器喜欢for .. in或 Object.keys()不会自动对此做出反应。如果您需要动态键控对象，例如通过 id 存储用户，请使用 observable.map创建 observable _map_s 。

因此，extendObservable您可以只向可观察映射添加一个新键，而不是在可观察对象上使用。

例子

const {observable, action} = mobx;
const {observer} = mobxReact;
const {Component} = React;
class TestStore {
  mySimpleObject = observable.map({});

  @action addSimpleProperty = (value) => {
    this.mySimpleObject.set(value, {newProp: value});
  }
}

@observer
class MyView extends Component {
  constructor(props) {
    super(props);
    this.handleAddSimpleProperty = this.handleAddSimpleProperty.bind(this);
  }
  handleAddSimpleProperty(e) {
    this.props.myStore.addSimpleProperty("newpropertyvalue");
  }

  render() { 
    var simpleObjectString = this.props.myStore.mySimpleObject.values();
    return (
      <div>     
        <h3> Simple Object</h3>
        {simpleObjectString.map(e => e.newProp)}
        <br/>
        <button onClick={this.handleAddSimpleProperty}>Add Simple Property</button>
     </div>
    );
  }
}

const store = new TestStore();
ReactDOM.render(<MyView myStore={store} />, document.getElementById('mount'));