mobx：array.map（）不是函数

Question

我使用mobx创建了一个商店，如下所示：

import {extendObservable} from 'mobx';

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

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

export default new InfluencerFeedStore();

然后我在React视图中观察该商店：

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()加载项目，React将正确地尝试重新呈现Feed视图（因为它注意到mobx observable已更新）...但我收到一个错误抱怨InfluencerFeedStore.data.map is not a function 。

通过阅读mobx文档，我认为重新分配我的data属性是有问题的，因为它是一个数组（而其他数据类型，如字符串“只是工作”）。 谁能告诉我这里我做错了什么？

Answer 1

事实证明我有两个问题：

1. 我需要使用replace()方法来覆盖可观察数组 ，而不是试图完全重新分配新值
2. 我实际上并没有将数组传递给我的setData()方法; 这就是我点击“地图不是函数”错误的原因

它应该如下所示：

import {extendObservable} from 'mobx';

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

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

export default new InfluencerFeedStore();

Answer 2

问题是（我认为根据我的评论）你没有从类的实例访问“数据”，你正在静态访问它，所以类的构造函数永远不会运行，“data”永远不会初始化。 “ObservableFeed”是一个实例。