我創建使用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
屬性是有問題的,因爲它是一個數組(而其他數據類型像字符串「只是工作」)。任何人都可以告訴我我在這裏做錯了什麼?
完全是爲了我自己的薰陶,你似乎是訪問以靜態方式將數據VAL,而不是從類的實例(數據在構造函數中初始化)。這可以嗎? ObservableFeed將代表一個實例。 –
確實,構造函數從來沒有被調用,所以這不起作用。應該首先實例化商店 – mweststrate