2016-12-01 99 views
1

我創建使用mobx商店如下:mobx:array.map()不是一個函數

import {extendObservable} from 'mobx'; 

class InfluencerFeedStore { 
    constructor() { 
     extendObservable(this, { 
      data: [] 
     }); 
    } 

    setData(items = []) { 
     this.data = items; 
    } 
} 

export default new InfluencerFeedStore(); 

然後我觀察到店我陣營的觀點:

import React from 'react'; 
import {observer} from 'mobx-react'; 
import FeedItem from './FeedItem'; 
import InfluencerFeedStore from '../../core/stores/InfluencerFeed'; 

import './style.css'; 

const generateItems =() => { 
    return InfluencerFeedStore.data.map((item, i) => (
     <FeedItem key={`feeditem-${i}`} {...item} /> 
    )); 
}; 

const Feed =() => (
    <div className="Feed vertical-scroll-flex-child"> 
     {generateItems()} 
    </div> 
); 

export default observer(Feed); 

在第一次渲染,我的Feed視圖工作得很好(雖然在InfluencerFeedStore.data陣列中沒有項目)。

如果我以後通過調用InfluencerFeedStore.setData()加載項,將作出反應正確試圖重新呈現Feed視圖(因爲它注意到觀察到的更新mobx)...但我得到一個錯誤,抱怨InfluencerFeedStore.data.map is not a function

通過閱讀mobx文檔,我收集到重新分配我的data屬性是有問題的,因爲它是一個數組(而其他數據類型像字符串「只是工作」)。任何人都可以告訴我我在這裏做錯了什麼?

+0

完全是爲了我自己的薰陶,你似乎是訪問以靜態方式將數據VAL,而不是從類的實例(數據在構造函數中初始化)。這可以嗎? ObservableFeed將代表一個實例。 –

+0

確實,構造函數從來沒有被調用,所以這不起作用。應該首先實例化商店 – mweststrate

回答

2

所以,事實證明,我有兩個問題:

  1. 我需要使用的replace()方法覆蓋observable array,而不是試圖完全重新分配一個新的值
  2. 我本來就不是將數組傳遞給我的setData()方法;這就是爲什麼我打的「地圖是不是一個函數」錯誤

它應該是這樣的:

import {extendObservable} from 'mobx'; 

class InfluencerFeedStore { 
    constructor() { 
     extendObservable(this, { 
      data: [] 
     }); 
    } 

    setData(items = []) { 
     this.data.replace(items); 
    } 
} 

export default new InfluencerFeedStore(); 
0

問題是(我認爲基於我的評論)你沒有從類的實例中訪問「數據」,你正在靜態訪問它,所以類的構造函數永遠不會運行,並且「數據」永遠不會運行初始化。 「ObservableFeed」是一個實例。

+0

我認爲這是不對的。在我的商店文件中,我導出的唯一東西是'導出默認的ObservableFeed' - 所以當我導入InfluencerFeedStore時,它引用同一個實例對象(它只是重命名)。除非我完全誤解了ES2015(這是可能的!) – arthurakay

+0

嗯......但是你不想導入導出的成員(這將是一個實例)? 我對ES6模塊的理解有點不穩定,因爲我使用的構建器不支持它們。但是從你所說的話,你可以導出一個東西(ObervableFeed),導入另一個(InfluencerFeedStore),並且通過這樣做,以某種方式隱式地獲得ObervableFeed的行爲? –

+0

我發現這似乎是凝膠: 「只能有一個默認的導出,這主要用於導出單個東西,比如一個類,或者一個你希望沒有任何附加功能的單個函數當你導入一個默認導出模塊時,使用c中的import d。「 這是否意味着從'./etc/InfluencerFeed'導入ObservableFeed? –