mobx extendObservable이 예상대로 작동하지 않습니다.

Question

관찰 가능한 상태에서 더 많은 속성을 추가하려면 extendObservable을 사용하려고하는데 작동하지 않습니다.

render:undefined 
render:1 

가 나는 property 객체와 저장소를 초기화 : 다음은 내 코드

var store = mobx.observable({ 
    property: {} 
}); 


mobx.autorun(function() { 
    console.log("render:"+store.property.a); 
}); 

store.property = {a:1}; 
extendObservable(store.property, {a:2}); 
store.property.a=3; 

출력은입니다. property에서 관찰 할 수있는 상태로 a을 추가하고 싶지만 extendObservable 메서드를 사용한 후에 실행 된 autorun을 얻지 못했습니다. 나는 가치 3이 인쇄 되길 기대했지만 그렇지 않았다. 내 코드에 무슨 문제가 있습니까? extendObservable 방법을 사용하는 올바른 방법입니까?

Answer 1

당신은이 문서의 Common pitfalls & best practices 섹션에서 작동하지 않는 이유를 읽을 수 있습니다

MobX 관찰 물체가 감지하거나 이전에 관찰 선언되지 않은 속성 할당 에 반응하지 않습니다. 따라서 MobX 관찰 대상 객체 은 미리 정의 된 키가있는 레코드로 작동합니다. extendObservable(target, props)을 사용하여 새로운 관찰 가능 속성을 개체에 도입 할 수 있습니다. 그러나 객체 반복자는 for .. in 또는 Object.keys()과 같이 자동으로 반응하지 않습니다. 예를 들어 ID로 사용자를 저장하는 것과 같이 동적으로 키 객체가 필요한 경우 observable.map을 사용하여 관찰 가능 _map_s를 으로 만듭니다.

따라서 관찰 가능한 개체에 extendObservable을 사용하는 대신 관찰 가능 맵에 새 키를 추가하기 만하면됩니다.

예

var store = mobx.observable({ 
    property: mobx.observable.map({}) 
}); 

mobx.autorun(function() { 
    console.log('render:' + store.property.get('a')); 
}); 

store.property.set('a', 2); 

setTimeout(function() { 
    store.property.set('a', 3); 
}, 2000); 

Answer 2

이 페이지 https://mobx.js.org/best/react.html을 매우 자세히 읽으십시오. extendObservable을 사용하여 추가 된 동적 속성 사용에 대한 법률이 있습니다. 섹션의 해당 페이지에 "관찰 중"(의도 한 말장난)이 문서화되어 있습니다. 잘못된 : 기존의 관찰 가능 객체 속성을 사용하십시오. 이를 수행하는 올바른 방법은 후속 섹션에서도 언급됩니다.

기본적으로 추적 기능은 상태 변이에서 다시 호출되도록 추적 기능의 get 방법을 사용해야합니다. 고정 코드는 -

mobx.autorun(function() { 
    console.log("render:"+store.property.get("a")); 
}); 

extendObservable(store.property, {a:2}); 
store.property.set("a", 3); 

그래서 당신은 extendObservable 확장 된 객체와 get/ set를 사용해야합니다.