4

我创建了一个商店，使用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 可观察对象已更新）......但我收到一个错误，抱怨InfluencerFeedStore.data.map is not a function.

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

4

2 回答 2

2

所以事实证明我有两个问题：

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

它应该如下所示：

import {extendObservable} from 'mobx';

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

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

export default new InfluencerFeedStore();
于 2016-12-01T16:23:49.127 回答
0

问题是（我认为基于我的评论）您没有从类的实例访问“数据”，而是静态访问它，因此该类的构造函数永远不会运行，并且“数据”永远不会初始化。“ObservableFeed”是一个实例。

于 2016-12-01T14:49:14.607 回答