Reagieren: Schleife über zwei verschiedene APIs scheint nicht zu funktionieren.

Question

Hallo Ich habe diese Mock-APIs:

Kommentare: https://api.myjson.com/bins/17g1r

Beiträge: https://api.myjson.com/bins/2ec13

Und ich möchte API und Kommentare Beiträge API in einer Schleife über die Anzahl der Kommentare jeweils Beiträge zu bekommen basiert auf der postId in der Kommentar-API in Anzahl. Ich habe versucht, dies zu tun, aber es gibt nur ein einzelnes Objekt mit Daten und andere als nichts zurück. Hier ist ein Teil der Komponente:

postComments(comments, posts) { 
    for (var key in comments) { 
     const obj = comments[key]; 
     return posts.map((post, i) => { 
       return <PostDisplay 
         key={i} 
         {...post} 
         commentLength={ obj.postId === post.id ? obj : '' } 
        />; 
     }) 
    } 
    } 

Die commentLength Stütze, wenn diese Erträge console.logged:

Object {id: 1, text: "Praesentium ut qui facere aliquid.", user: "keltonabshire", postId: 60297} 
16 

Die Object ist das einzige Ergebnis es vorbei ist und die 16 ist die leere Zeichenkette I‘ m zu commentLength auf der PostDisplay Komponente übergehen.

Allerdings möchte ich in der Lage sein, die PostDisplay Komponente zu machen und erhalten auch die Anzahl der comments diese besondere postpostId Verwendung hat.

Ich habe die PostDisplay funktioniert, aber die commentsLength ist nicht alle posts bezogen auf jede Komponente.

Danke

Answer 1

Sie möchten die Kommentare Länge der einzelnen Post bekommen? Sie können zunächst keine Notwendigkeit Kommentare zu Schleife, versuchen Sie dies:

postComments(comments, posts) { 

    return posts.map((post, i) => { 
      return <PostDisplay 
        key={i} 
        {...post} 
        commentLength={ comments.filter(comment => comment.postId === post.id).length } 
       />; 
    }) 
}