Визуализация массива, вложенного в массив

Question

Как мне показать массив, который вложен в массив?

Код:

this.props.posts:

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

Я пытаюсь показать это так:

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>

      )
  });
}

Я хочу показать содержание tags на каждой строке.

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.

Должно быть

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

Также было бы неплохо использовать описательные имена - key не очень наглядно и затрудняет понимание. Попробуйте что-то вроде

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

Переименование key в post делает более очевидным, что вам нужно получить доступ к tags имущество.

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

Возврат отсутствует в методе post.tags.map

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>
  )
});
}

Answer 3

Ты должен так делать

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>

    )
  });
}

также ваши теги в посте не массив

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

так должно быть

 [
   {"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

Это выглядит так же просто, как вы не получаете доступ к tags от post объект.

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