전체 MobX 관측 가능 배열에 새 값을 설정하는 방법

Question

MobX에서 모든 값을 다시 설정하지 않고 관측 가능한 전체 배열에 새 값을 설정하려면 어떻게해야합니까?

첫번째 생각은 다음과 같습니다

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

그러나이 autorun를 해고하지 않을, 난 그냥 삭제 것입니다 내 observable array과 새 값/배열을 대체했다.

이렇게하려면 올바른 방법은 무엇입니까?

이 내 용액 세터와 다른 변수를 사용이고, setter 함수 안에 교체 첨가 인덱스 삭제 인덱스 의해 관찰 배열 인덱스 변경. 이처럼 :

(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; 사용

전체 배열의 내용을 대체하고 렌더링을 트리거하는 방법 .replace()을 발견했습니다. 나는

.replace(newItems);

새 것으로 배열의 모든 기존 항목을 대체 the docs에 더 많은주의 clear() 방법에 대해 찾고 거기에서 그것을 after a suggestion을 발견했다.

다음과 같을 것이다 코드 :

(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') 
);