Traitement des données d'image en double dans React Native

Question

Je suis en train de créer une page de commentaires, qui est une vue de liste pour les commentaires dans un seul article (en gros, c'est juste une page de commentaires sur facebook).

J'ai généré ces données de réponse JSON ci-dessous, et comme vous pouvez le voir, il existe des URL d'image en double. Cela signifie que si le même utilisateur commente 100 fois sur un message, il doit obtenir des données d'image à partir d'AWS 100 fois plutôt que 1 fois.

Peut-être que c'est trop technique? Comment allez-vous gérer ça?

Voici les données JSON

{ 
    "comments": [{ 
     "id": 4, 
     "user": { 
      "image": "https://xxx.s3.amazonaws.com:443/-", 
      "id": 1, 
      "username": "jbaek73" 
     }, 
     "content": "Edited!", 
     "publish": "2017-09-18T12:11:41.002838Z", 
     "updated": "2017-09-19T08:16:25.408756Z", 
     "reply_count": 1 
    }, 
    { 
     "id": 13, 
     "user": { 
      "image": "https://xxx.s3.amazonaws.com:443/-", 
      "id": 1, 
      "username": "jbaek73" 
     }, 
     "content": "Neaa!", 
     "publish": "2017-09-18T14:12:51.876523Z", 
     "updated": "2017-09-18T14:12:51.876600Z", 
     "reply_count": 0 
    }, 
    { 
     "id": 14, 
     "user": { 
      "image": "https://xxx.s3.amazonaws.com:443/random", 
      "id": 5, 
      "username": "koreana" 
     }, 
     "content": "Newa!", 
     "publish": "2017-09-19T08:16:35.190351Z", 
     "updated": "2017-09-19T08:16:35.190398Z", 
     "reply_count": 0 
    }, 

Answer 1

Dans ce cas, je voudrais créer un objet image avec toutes les images requises et l'ID utilisateur comme clé:

randomFuntionName() { //you can call after you get your json 
var img = [] 

comments.forEach((element) => { //comments are comming from your json btw 
    if (img[element.user.id] == null) { 
    img[element.user.id] = require(element.user.image) 
    } 
}) 
this.setState({img}) 
} 

render() { 
    //this part is only for example, you need to dynamicaly change userID 
    return (<Image source={this.state.img[userId]}/>) 
} 

Cela devrait faire le travail, mais n'a pas testé dans l'application.