Mobx：添加新的（數組）屬性到可觀察對象

我有一個可觀察的對象，我想存儲一些數據。鑰匙是我的客戶實體的唯一ID，值是客戶訂單（它們本身就是客體）的數組。Mobx：添加新的（數組）屬性到可觀察對象

我初始化一個對象，具有：

@observable data = {};

然後，當我從網絡數據，我想保存它們，使用：

@action 
saveData(customerId, ordersForCustomer) { 
    this.data = extendObservable(this.data, { 
    [customerId]: observable(ordersForCustomer); 
    } 
}

遺憾的是，似乎我的對象（或它的屬性）不被觀看。

這是爲什麼？我該如何解決這個問題？有什麼特別的我需要了解可觀察對象如何與數組一起作爲其值？

來源

2016-09-29 Matúš Čongrády

將發生突變，所以你不需要'this.data = ...'。試試看'extendObservable（this.data，{[customerId]：ordersForCustomer}'。這是否有效？ – Tholle

不，它沒有。我使用可觀察地圖解決了我的問題。但是，我想知道什麼是case。 –

這個問題提出了在文檔的Common pitfalls & best practices部分：

MobX觀察對象不檢測或反應屬性分配了未宣佈之前觀察到的。所以MobX可觀察對象充當預定義鍵的記錄。您可以使用 extendObservable(target, props)向對象引入新的可觀察的屬性。但是，對象迭代器如for .. in或 Object.keys()不會對此做出自動反應。如果您需要動態鍵控對象，例如通過ID存儲用戶，請使用 observable.map創建可觀察_map_s。

因此，而不是一個可觀察的對象上使用extendObservable，你可以只添加一個new key to a map：

@observer 
class App extends Component { 
    @observable data = asMap({}); 
    constructor() { 
    super(); 
    setInterval(() => { 
     this.data.set(Math.random().toString(36).slice(-5), Math.random()); 
    }, 1000); 
    } 
    render() { 
    return (
     <div> 
     { this.data.entries().map(e => <div> {e[1]} </div>) } 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

來源

2016-09-29 19:14:22 Tholle

截至今天，至少，它看起來像關於使用地圖的文本已經轉移到[陷阱頁面]（https://mobx.js.org/best/pitfalls.html）。還有一個體面的討論由Weststrate在這裏映射視頻：[*使用可觀察對象，數組和地圖來存儲MobX *中的狀態]（https://egghead.io/lessons/react-mobx-fundamentals-using-observable-objects-arrays-和地圖到商店的狀態），地圖的特定信息從2點28分左右開始，但仍然希望你可以像''''一樣'包裝'{'''，並且哈希值可以被刪除（沒有新的OM）顯然沒有骰子。 – ruffin

Mobx：添加新的（數組）屬性到可觀察對象

回答

相關問題