mobx: array.map() ist keine Funktion

Question

ich ein Geschäft erstellt haben mobx wie folgt:

import {extendObservable} from 'mobx'; 

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

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

export default new InfluencerFeedStore(); 

Und ich beobachte dann diesen Speicher in meinem React Ansicht:

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); 

On Erstes Rendern, meine Feed Ansicht funktioniert einwandfrei (obwohl es keine Elemente im Array gibt).

Wenn ich später Teile der Ladung durch InfluencerFeedStore.setData() Aufruf korrekt versuchen reagieren wird wieder machen die Feed Ansicht (weil es die mobx beobachtbaren aktualisiert bemerkt) ... aber ich habe einen Fehler, dass InfluencerFeedStore.data.map is not a function beschweren.

Aus der Lektüre durch den mobx docs, entnehme ich, dass die Neuzuweisung meine data Eigenschaft problematisch ist, weil es ein Array (während andere Datentypen wie Strings „einfach funktionieren“) ist. Kann mir jemand sagen, was ich hier falsch mache?

Answer 1

So stellt sich heraus, dass ich zwei Probleme hatte:

1. Ich brauchte die replace() Methode werden mit Hilfe der observable array zu überschreiben, anstatt zu versuchen, die Produktion eines neuen Wert
2. ich nicht wirklich war neu zuweisen Übergeben eines Arrays in meine setData() Methode; deshalb habe ich auf den „Karte ist keine Funktion“ Fehler

Es sollte wie folgt aussehen:

import {extendObservable} from 'mobx'; 

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

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

export default new InfluencerFeedStore(); 

Answer 2

Problem ist (ich glaube, basierend auf meinem Kommentar) Sie nicht "Daten" von einer Instanz der Klasse zugreifen, Sie greifen statisch auf, so dass der Konstruktor der Klasse nie ausgeführt wird, und "Daten" nie initialisiert. "ObservableFeed" ist eine Instanz.