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

したがって、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 に答える