React Nativeで重複した画像データを扱う

Question

私は「コメント詳細ページ」をビルドしています。これは、1つの投稿内のコメントのリストビューです（基本的にはFacebookのコメントページです）。

下記のJSONレスポンスデータを生成しました。ご覧のとおり、画像URLが重複しています。つまり、同じユーザーが投稿に対して100回コメントすれば、1回ではなく100回AWSから画像データを取得する必要があります。

おそらくそれはオーバーエンジニアリングですか？あなたはどうやってこれに対処していますか？ここで

は、この場合、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

ですが、私はキーとして必要なすべての画像を、画像オブジェクトとユーザーIDを作成します。

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

これは、作業を行う必要があり、アプリでテストしていませんでした。