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

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

这应该就足够了(没有测试，就没有保证)。默认情况下，如果他们是非复杂物体，他们的孩子也可以被观察到。注意，object.assign在updateDot中只适用于预定义的属性(在本例中为x和y)。MobX还无法跟踪不存在的属性。因此，要么确保所有可能的参数都预先声明(如果需要的话带有未定义的值)，要么对点使用映射结构。

Answer 2

我想这取决于你的Metrix成分。你是如何在其中使用dots的？

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

实际上，您必须从中读取数据。

在这种情况下，您的矩阵必须调用dots.get(....)，然后您的Metrix将在dots被更改时重新生成。

顺便说一句，如果您的IndexComponent和Map只传递给dots，它就不会重发。