動的に私はこのようなarrays.jsと呼ばれるファイルで配列しているFlatList

Question

を経由して、文字のスクロールリストを表示する：、私はスクロール経由で動的にそれをすべて書き出すために私のメイン画面で

export var Characters = [ 
    { 
    id: 1, 
    Name: "Dirk Longsword" 
    Avatar: require('./images/profile1.png') 
    }, 
    { 
    id: 2, 
    Name: "Msal Reaper" 
    Avatar: require('./images/profile2.png') 
    }, 
    { 
    id: 3, 
    Name: "Stone Rockthrow" 
    Avatar: require('./images/profile3.png') 
    } 
] 

をしようとしていますこのような：

import {Characters} from './arrays'; 


render() { 

    return (
     <FlatList 
      data={Characters} 
      keyExtractor={ 
       character => character.Name 
      } 
      renderItem={ 
       ({character}) => (
        <View style={[styles.flexRow]}> 
         <Text> 
          {character.Name} 
         </Text> 
         <Image style={[ styles.charImage ]} 
          source={character.Avatar} 
         /> 
        </View> 
       ) 
      } 
     /> 

} 

しかし、私はこのエラーを取得しておいてください。

'undefined' is not an object(character.Name)

私はわからないんだけど私は間違っているし、救いの手を使うことができます。

ありがとうございます！

Answer 1

まず、投稿したコードの多くの構文エラーを無視します。

第2に、{ }の破壊がJavascriptでどのように機能するのか誤解しています。 FlatlistのrenderItemに渡されたデータからcharacterを削除しようとしています。 renderItemに渡されるオブジェクトには、そのようなキー値はありません。あなたはthe docsを見れば、あなたがそこに表示されますのみ、次のキーがあります。

• 項目<は - これは、あなたがアクセスしようとしている「文字」オブジェクトが含まれています。
• インデックス
• セパレータ

次の2つの方法で、あなたのコードを修正することができます。

renderItem={ 
    ({item}) => (
     <View style={[styles.flexRow]}> 
      <Text> 
       {item.Name} 
      </Text> 
      <Image style={[ styles.charImage ]} 
       source={item.Avatar} 
      /> 
     </View> 
    ) 
} 

：

は

renderItem={ 
    (character) => (
     <View style={[styles.flexRow]}> 
      <Text> 
       {character.item.Name} 
      </Text> 
      <Image style={[ styles.charImage ]} 
       source={character.item.Avatar} 
      /> 
     </View> 
    ) 
} 

他のitemをdestructure、あなたがcharacterで何をしようとしている方法でそれを使用することです：の一つは全くdestructureないことです