Rendern eines in einem Array verschachtelten Arrays

Question

Wie zeige ich das Array, das in einem Array verschachtelt ist?

Code:

this.props.posts:

[ 
    {"id":1, "name": "name01", "tags":["tag1, tag2, tag3, tag4"]}, 
    {"id":2, "name": "name02", "tags":["tag2, tag4"]} 
] 

Die Art, wie ich zu zeigen, bin versucht:

renData() { 
    const { posts, tags } = this.props.posts 
    return posts.map((key, idx) => { 
    return (

     <View key = {idx}> 
      <Text style={{fontSize:18}}>  // <= This works if tags not mapped 
       { key.id } - { key.name } 
      </Text> 

     /*  
       tags.map((keyTag, idp) => {   //<= This does not work. 
        <View key = {idp}>   // <= idp not defined error. 

        <TouchableOpacity> 

        <Text> {keyTag} </Text>   // <= How to show the content. 

        </TouchableOpacity> 

        </View> 
       }); 
     */  

     </View> 

    ) 
    }); 
} 

ich den Inhalt der tags auf jeder Zeile angezeigt werden sollen .

UPDATE1:

renData() { 
    const { posts, tags } = this.props.tagPosts 
    return posts.map((post, postIndex) => { 
    return (
     <View key = {postIndex}> 
      <View> 
      <Text style={{fontSize:18}}> 
       { post.id } - { post.name } 
      </Text> 
     { 

       post.tags.map((tag, tagIndex) => { 
         <View key = {tagIndex}>   
          <TouchableOpacity> 
           <Text> {tag} </Text>    
          </TouchableOpacity> 
         </View> 
        }) 
      } 
     </View> 
    ) 
    }); 
} 

Answer 1

tags.map((keyTag, idp) => {   //<= This does not work. 

Sollte

sein

key.tags.map((tag, idp) => { 

Es wäre auch eine gute Idee, beschreibende Namen verwenden - key nicht sehr aussagekräftig ist und macht es schwieriger, zu folgen. Probieren Sie etwas wie

posts.map((post, index) => { 

Umbenennung key-post macht es ein wenig mehr auf der Hand, dass Sie die tags Eigenschaft zugreifen müssen.

renData() { 
    const { posts, tags } = this.props.posts 
    return posts.map((post, postIndex) => { 
    return (
     <View key = {postIndex}> 
      <Text style={{fontSize:18}}> 
       { post.id } - { post.name } 
      </Text> 
      { 
       key.tags.map((tag, tagIndex) => 
        <View key = {tagIndex}>   
         <TouchableOpacity> 
          <Text> {tag} </Text>    
         </TouchableOpacity> 
        </View> 
       ); 
      } 
     </View> 
    ) 
    }); 
} 

Answer 2

Es sieht so einfach zu sein, wie du bist nicht die tags aus dem post Objekt zugreifen.

key.tags.map((keyTag, idp) => { // ... 

Answer 3

Sie möchten, dass auch

renData() { 
const { posts } = this.props // take posts from props 
return posts.map((key, idx) => { 
    const { tags } = key // take tags from key which is single post 
    return (

    <View key = {idx}> 
     <Text style={{fontSize:18}}>  
      { key.id } - { key.name } 
     </Text> 


      tags.map((keyTag, idp) => {   
       <View key = {idp}>   

       <TouchableOpacity> 

       <Text> {keyTag} </Text>    

       </TouchableOpacity> 

       </View> 
      }); 
    </View> 

    ) 
    }); 
} 

tun sollten Ihre Tags in der Post ist nicht Array

[ 
    {"id":1, "name": "name01", "tags":["tag1, tag2, tag3, tag4"]}, 
    {"id":2, "name": "name02", "tags":["tag2, tag4"]} 
] 

es

[ 
    {"id":1, "name": "name01", "tags":["tag1", "tag2", "tag3", "tag4"]}, // notice the quotes on each tag not around all tags as it will one element in array 
    {"id":2, "name": "name02", "tags":["tag2", "tag4"]} 
] 

Answer 4

Rückkehr in Post fehlt sein sollte. Tags.map Methode

renData() { 
const { posts, tags } = this.props.tagPosts 
return posts.map((post, postIndex) => { 
return (
    <View key = {postIndex}> 
     <View> 
     <Text style={{fontSize:18}}> 
      { post.id } - { post.name } 
     </Text> 
    { 
     post.tags.map((tag, tagIndex) => { 
      return (
       <View key = {tagIndex}>   
       <TouchableOpacity> 
       <Text> {tag} </Text>    
       </TouchableOpacity> 
       </View> 
      ) 
     }) 
    } 
    </View> 
) 
}); 
}