React Native - インデックスの状態に応じて印刷しようとしています

Question

この配列をループして、真または偽として保存されているかどうかに応じて引用符を印刷しようとしています。 現時点では、JSON配列に表示されます。私はネイティブに反応するのが初めてで、mapの動作の100％ではありません。

var savedQuote = quotes.quotesArray.map(quote => quote.isSaved) 

{ 
        quotes.quotesArray.map((quote, i) => { 
        if(savedQuote){ 
         return(       
          <TouchableOpacity key={i} style = {styles.border}> 
           <Text style = {styles.text}> 
           i: {i}. {quotes.quotesArray[i].preview} 
           </Text> 
          </TouchableOpacity> 
         ) 
        } 
        else{ 
         return <Text key = {i}>{i}Nada</Text> 
        } 
        }) 
       } 

Answer 1

あなたのコードで2 mapを持っている理由私は理解していません。引用符によって

quotes.quotesArray.map((quote, i) => { 
    if(quote.isSaved){ 
    return(       
     <TouchableOpacity key={i} style = {styles.border}> 
     <Text style = {styles.text}> 
      i: {i}. {quote.preview} 
     </Text> 
     </TouchableOpacity> 
    ) 
    } else { 
    return <Text key = {i}>{i}Nada</Text> 
    } 
}); 

これがループをし、どちらか一方のノードまたはどちらかquote.isSavedである場合はtrueかどうかを返します。一つは十分です。

新しい変数の元に割り当てる場合は、新しい配列に保存することができます：var savedQuotes = ...をしたり、レンダリング関数の中にそれを使用します。

render() { 
    return (
     <View> 
     {quotes.quotesArray.map...} 
     </View> 
    ); 
    } 

マップ（）メソッドを使用して新しい配列を作成 を呼び出した結果は、この配列のすべての要素に機能を提供しました。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

ここ

反応するドキュメントからのいくつかの例は次のとおりです：ここ

は、より多くの情報ですhttps://facebook.github.io/react/docs/lists-and-keys.html