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

最好设置一个fiddle，这样我们才能真正验证一个解决方案，但我认为

@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 是非复杂对象，则 Observable 默认情况下也使它们的子对象可观察。请注意，updateDot 中的 object.assign 仅适用于预定义的属性（在本例中为 x 和 y）。 MobX 还不能追踪不存在的属性。因此，要么确保预先声明所有可能的属性（如果需要，使用未定义的值），要么也为点使用映射结构。

Answer 2

我认为这取决于您的 Metrix 组件。你怎么用dots里面的？

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

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

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

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

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

Mobx-react does not update component when observable.map value is changed

reactjs

mobx

mobx-react