Mobx反応する。.. observable.map値が私の店で

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

を考えます保証）。 Observablesは、デフォルトでは、複雑でないオブジェクトでも子どもを観察可能にします。 updateDotのobject.assignは、事前定義されたプロパティ（この場合はxとy）に対してのみ機能することに注意してください。 MobXは存在しないプロパティをまだ追跡できません。だから、すべての可能なprpoertiesが（必要であれば未定義の値で）先験的に宣言されていることを確認するか、ドットのマップ構造を使用してください。

Answer 2

あなたのMetrixコンポーネントによって異なると思います。どのようにそれにdotsを使用しますか？

MobXは、観測可能な値を小道具として渡すだけで再レンダリングしません。

実際にはをとしてください。

この場合、あなたのマトリックスはdots.get(....)でなければなりません。dotsが変更された場合、Metrixは再レンダリングします。

ところで、あなたのIndexComponentとは、dotsを渡すだけで再レンダリングされません。