Question

在我的商店..

@observable dots = observable.map({
  '0x001': extendObservable({ x: 2000, y: 2000 }),
  '0x002': extendObservable({ x: 5000, y: 5000 }),
  '0x003': extendObservable({ x: 10000, y: 10000 }),
});

@action updateDot(id, properties) {
  const dot = this.dots.get(id);
  this.dots.set(id, extendObservable(Object.assign(dot, properties)));
}

当我更新点值..

store.updateDot('0x002', {
  x: 200,
  y: 300,
});

我的组件没有反应..

@inject('store') @observer
export class IndexComponent extends Component {

  render() {
    const { store } = this.props;
    const { dots } = store;

    return <Map dots={dots} />
  }

}

并映射..

@observer
class Map extends Component {
  render() {
    const { dots } = this.props;
    // NOT CALLED WHEN UPDATE DOTS
    return <Matrix dots={dots} />
  }
}

和矩阵......

@observer
class Matrix extends Component {
  render() {
    const { dots, ...rest } = this.props;
    // NOT CALLED WHEN UPDATE DOTS
    return <div ...rest ></div>
  }
}

Answer 1

最好设置一个小提琴，因为我们可以真正验证解决方案，但我认为

@observable dots = observable.map({
  '0x001': { x: 2000, y: 2000 },
  '0x002': { x: 5000, y: 5000 },
  '0x003': { x: 10000, y: 10000 },
});

@action updateDot(id, properties) {
  const dot = this.dots.get(id);
  Object.assign(dot, properties)
}

这应该足够了（没有测试，没有保证）。如果它们是非复杂对象，则默认情况下，Observable也会使其子项可观察。请注意，updateDot中的object.assign仅适用于预定义属性（在本例中为x和y）。 MobX无法跟踪不存在的属性。因此要么确保所有可能的prpoerties都是预先声明的（如果需要，还有未定义的值），或者也使用地图结构作为点。

Answer 2

我认为这取决于您的Metrix组件。你如何在其中使用dots？

如果您只是将可观察的值作为道具传递，MobX将不会重新渲染。

您必须实际读取数据。

在这种情况下，您的Matrix必须致电dots.get(....)，然后您的Metrix会在dots更改后重新呈现。

顺便说一下，IndexComponent和Map如果只是向下传递dots，则不会重新呈现。

当observable.map值更改时，Mobx-react不会更新组件

2 个答案: