子コンポーネントの小道具をスクリーンに表示しない

Question

私はReact Nativeを初めて使っています。ステートレスコンポーネントを作成して、それぞれがタグの配列を含むオブジェクトである小道具をループしました。

次に、各配列アイテムから1つのタグを返します。 Iは、関数renderTags（）を呼び出して、{タグ}何も返さないしようとすると、画面にレンダリングされる、しかし

を（コンソールスクリーンショットに記録しました）。

import React from 'react'; 
    import { View, Text, TouchableHighlight } from 'react-native'; 

    const Tags = (props) => { 
     console.log('props', props); 
     function renderTags() { 
     // Loop over each object. Object contains an array. 
     for (let i of Object.keys(props)) { 
      console.log(props[i]); 
      // Loop over each array item to return a single tag 
      props[i].forEach(tag => { 
      console.log(tag); 
      return (
       <TouchableHighlight style={{backgroundColor: '#ede7f6', 
       borderRadius: 4, 
       paddingTop: 4, 
       paddingBottom: 4, 
       paddingRight: 4, 
       paddingLeft: 4, 
       marginRight: 4}}> 
       <Text style={{ fontSize:12 }}>{tag}</Text> 
       </TouchableHighlight> 
      ); 
      }); 
     } 
     } 
     return (
     <View style={{flexDirection: 'row', marginTop: 10}}> 
      {renderTags()} 
     </View> 
    ); 
    }; 
    export {Tags}; 

ログやコンソールにエラーや警告が表示されないため、なぜこれがレンダリングされないのかわかりません。これを行うより良い方法はありますか？

Answer 1

renderTagsは現在実装されているようにundefinedを返します。 forEachからの返信は意味をなさない。

は、あなたが代わりのforEachのマップを使用する必要があります。この

function renderTags() { 
    return [...Object.keys(props).map(key => props[key].map(tag => (
     <TouchableHighlight style={{backgroundColor: '#ede7f6', 
       borderRadius: 4, 
       paddingTop: 4, 
       paddingBottom: 4, 
       paddingRight: 4, 
       paddingLeft: 4, 
       marginRight: 4}}> 
       <Text style={{ fontSize:12 }}>{tag}</Text> 
       </TouchableHighlight> 
    )))] 

} 

Answer 2

のようなものであるべき。なぜなら、forEachは値を返さないため、配列や反復可能なオブジェクトを繰り返し処理するだけです。しかしmapは、論理出力を含む配列を返します。

リアクションコンポーネントがレンダリングして、単一のコンポーネントインスタンスまたはコンポーネントインスタンスの配列が必要な場合。