React Native mobx liaison à FlatList ne fonctionne pas

Question

J'ai une application RN (0.44.2) mobx (3.1.10) qui utilise un FlatList. Je suis essentiellement suivant https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

Lorsque vous utilisez mon propre magasin, contrairement aux exemples, je vais avoir à utiliser toJS() afin d'obtenir la FlastList rendre

// renders list 
    <FlatList 
     data={this.props.giphyStore.images.toJS()} 
     keyExtractor={(_, i) => i} 
     renderItem={({ item }) => <Text>found the data</Text>} 
    /> 

    // does not render list 
    <FlatList 
     data={this.props.giphyStore.images} 
     keyExtractor={(_, i) => i} 
     renderItem={({ item }) => <Text>did not find the data</Text>} 
    /> 

Je suis vraiment mal à la figure pourquoi peut-être besoin de toJS() dans certains cas et pas d'autres.

Mon magasin est le réglage des images observables comme celui-ci

async getImageList(query: string) { 
    try { 
    const requestURL = `${constants.GIPHY_ENDPOINT}${query}` 
    const response = await axios.get(requestURL); 
    const imgs = response.data.data.map((item) => { 
     return { id: item.id, url: item.images.downsized.url } 
    }) 
    this.images.replace(imgs) 
    } catch (e) { 
    } 
} 

En question de suivi, je ne sais pas pourquoi je dois faire le this.images.replace(imgs) suivant où, comme dans le tutoriel, il fait tout simplement fait this.tracks = response.data.tracks.items qui déclenche l'observable très bien.

Si quelqu'un a des suggestions, je l'apprécierais beaucoup.

Answer 1

Ceci est parce que tableaux de MOBX sont des objets et les données FlatList ou dans natif réagissent attend un tableau. Vous pouvez en lire plus à ce sujet dans here et there.

Also..., slice renvoie une copie superficielle; un nouveau tableau avec le même contenu, tandis que toJS convertit également les valeurs dans le tableau (mais seulement si elles sont observables).

Answer 2

Cette question est un peu ancienne, mais il vaut également la peine de mentionner que MobX ne suit que la fonction de rendu par défaut, tandis que FlatList accepte les rappels de rendu et les appelle. (par exemple, renderItem={this.renderItem})

Pour que les éléments soient mis à jour sans actualisation complète de la liste, enveloppez le résultat du rappel de rendu avec <Observer>.

Voir Understanding what MobX reacts to