2017-09-29 3 views
1

Ich bin 'Kommentare Detailseite', die eine Listenansicht für Kommentare in einem einzigen Beitrag (im Grunde ist es nur Facebook-Kommentar Seite).Umgang mit doppelten Bilddaten in React Native

Ich habe diese JSON-Antwortdaten unten generiert, und wie Sie sehen können, gibt es doppelte Bild-URLs. Das bedeutet, dass wenn ein Nutzer 100 Mal einen Beitrag kommentiert, 100 Mal statt 1 Mal Bilddaten von AWS abrufen muss.

Vielleicht ist es over-engineering? Wie gehst du damit um?

Hier ist JSON-Daten

{ 
    "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 
    }, 
+0

Ihr Browser wird das Bild das erste Mal zwischenspeichern, es muss nicht 100 mal abgerufen werden – Mikkel

+0

@Mikkel Das wäre wunderbar. Wird mein Browser (iOS und Android) es automatisch machen? Hast du irgendeinen Artikel darüber gelesen ??? Wie hast du das gewusst? –

+0

Diese Dinge sind bekannt. – Mikkel

Antwort

1

In diesem Fall würde ich ein Bildobjekt mit allen erforderlichen Bilder und die Benutzer-ID als Schlüssel erstellen:

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]}/>) 
} 

Dies sollte die Arbeit machen, aber nicht in App getestet.