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 属性是有问题的，因为它是一个数组（而其他数据类型，如字符串 "just work").谁能告诉我我做错了什么？

Answer 1

问题是（我认为基于我的评论）您不是从 class 的实例访问 "data"，而是静态访问它，因此 [= 的构造函数15=] 从不运行，并且 "data" 从不初始化。 "ObservableFeed" 是一个实例。

Answer 2

原来我有两个问题：

我需要使用 replace() 方法覆盖 observable array，而不是尝试完全重新分配新值
我实际上并没有将数组传递到我的 setData() 方法中；这就是我遇到 "map is not a function" 错误

它应该是这样的：

import {extendObservable} from 'mobx';

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

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

export default new InfluencerFeedStore();

mobx: array.map() 不是函数

mobx: array.map() is not a function

javascript

reactjs

mobx

mobx-react