MobX観測可能アレイ全体に新しい値を設定するには

Question

MobXではどのようにすべての値を再設定せずに観測可能アレイ全体に新しい値を設定できますか？

まず考えは次のようになります。

let arr = observable([]); 
autorun(() => { 
    console.log('my array changed!'); 
}); 
arr = ['foo', 'bar']; 

しかし、それはautorunを発射しません、私はちょうど私のobservable arrayを消去し、新しい値/配列に置き換えます。

これを行う正しい方法は何ですか？これ

私の解決策は、セッターと別の変数を使用すること、及びセッター関数内観察アレイインデックスによってインデックス、インデックスを追加および削除、置き換えを変更ました。このように：

（jsFiddle here）

const {observable, computed, extendObservable} = mobx; 
const {observer} = mobxReact; 
const {Component} = React; 
const {render} = ReactDOM 
const {autorun} = mobx 

class Store { 
    @observable entries = [1,2,3,4,5]; 
    set rows(arr) { 
     // add new values 
     for (let i = 0, l = arr.length; i < l; i++) { 
      this.entries[i] = arr[i]; 
     } 
     // remove rest of entries 
     let diff = this.entries.length - arr.length; 
     if (diff > 0) { 
      while (diff > 0) { 
       this.entries.pop(); 
       diff--; 
      } 
     } 
    } 
} 
const store = new Store(); 

@observer 
class App extends Component { 
    updateRows(){ 
     return this.props.entries.map(
      (row, i) => <p key={i}>{row}</p> 
     ); 
    } 
    render() { 
     const rows = this.updateRows(); 
     return <div>{rows}</div>; 
    } 
} 

setTimeout(() => { 
    store.rows = ['foo', 'bar']; 
    document.body.innerHTML += 'Timeout fired...'; 
}, 1000); 


render(
    <App entries={store.entries} />, 
    document.getElementById('mount') 
); 

は、これは正しい方法ですか？
または同じ変数を使用して配列全体に値を再割り当てする方法がありますか？

Answer 1

TLDR; use

配列全体の内容を置き換えてレンダリングをトリガーするメソッド.replace()が見つかりました。私はそれclear()方法について、そこからafter a suggestionがthe docs

.replace(newItems);

にもっと注意深く見ているが、新しいものに、アレイ内のすべての既存のエントリを置き換えました。

コードは次のようになります。

（jsFiddle）を

const {observable, autorun} = mobx; 

class Store { 
    @observable arr = [1,2,3,4,5]; 
} 
const store = new Store(); 
autorun(() => { 
    console.log('my array changed!', store.arr.slice()); 
}); 
setTimeout(() => { 
    store.arr.replace(['foo', 'bar']); 
}, 1000); 

全体のコードは次のようになります。

（jsFiddle）

const {observable, computed, extendObservable} = mobx; 
const {observer} = mobxReact; 
const {Component} = React; 
const {render} = ReactDOM 
const {autorun} = mobx 

class Store { 
    @observable entries = [1,2,3,4,5]; 
} 
const store = new Store(); 

@observer 
class App extends Component { 
    updateRows(){ 
     return this.props.entries.map(
      (row, i) => <p key={i}>{row}</p> 
     ); 
    } 
    render() { 
    const rows = this.updateRows(); 
    return <div>{rows}</div>; 
    } 
} 

setTimeout(() => { 
    store.entries.replace(['foo', 'bar']); 
}, 1000); 


render(
    <App entries={store.entries} />, 
    document.getElementById('mount') 
);