(Reagieren Muttersprache) eine Liste von Karten für Elemente in einem Array angezeigte

Question

ich zwei Arrays haben, lassen Sie uns Wort sagen und Definition

export default class Dictionary extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     word: [], 
 
     definition:[], 
 
     index: 0 
 
    };  
 
}

Ich habe eine Stütze

<Card word = {w} definition = {d}/> 

und ich möchte eine Liste dieser Karten für jedes Wort/Definitionspaar im Array anzeigen. Wenn 5 Wörter/Definitionen vorhanden sind, möchte ich 5 dieser Karten in einer ScrollableView anzeigen. Wie kann ich das machen? Vielen Dank!

Answer 1

Sie können Array.prototype.map Funktion verwenden. Das zweite Argument in Array.prototype.map Funktion Rückruf ist Index. Sie können diesen Index verwenden, um die entsprechenden definition Artikel wie diese

export default class Dictionary extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     word: ["a","b","c"], 
     definition:["a","b","c"], 
     index: 0 
    };  

    render() { 
     <div> 
     {this.state.word.map((w,i) => { 
      return <Card word = {w} definition = {this.state.definition[i]}/> 
     })} 
     </div> 
    } 
} 

Answer 2

In Ihrem Zustand anzuzeigen Sie Wort und Definition in einer Sache wie verschmelzen könnten:

dictionary: [ 
    { 
    index: 0, 
    word: 'Car', 
    definition: 'Definition of car', 
    }, 
    // More objects like the one above 
] 

Dann eine Funktion schreiben, die dieses Array macht von Objekte, könnte so sein:

renderDictionary() { 
    return (this.state.dictionary.map(word => { 
    <Card key={word.index} word={word.word} definition={word.definition} /> 
    })); 
} 

Und dann rufen Sie einfach die Funktion:

export default class Dictionary extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     dictionary: [ 
     { 
      index: 0, 
      word: 'Car', 
      definition: 'Definition of car', 
     }, 
     // More objects like the one above. 
     ], 
    }; 
    } 

    renderDictionary() { 
    return (this.state.dictionary.map(word => { 
     <Card key={word.index} word={word.word} definition={word.definition} /> 
    })); 
    } 

    render() { 
    return (
     <View> 
     {this.renderDictionary()} 
     </View> 
    ); 
    } 
}