javascript - 为什么我调用 (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

此问题在 Common pitfalls & best practices 中提出文档部分:

MobX observable objects do not detect or react to property assignments that weren't declared observable before. So MobX observable objects act as records with predefined keys. You can use extendObservable(target, props) to introduce new observable properties to an object. However object iterators like for .. in or Object.keys() won't react to this automatically. If you need a dynamically keyed object, for example to store users by id, create observable _map_s using observable.map.

因此，无需在可观察对象上使用 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'));