Beenden Sie eine Map-Schleife in der Reaktion native

Question

Ich versuche, aus einer Schleife auszubrechen, sobald ich gefunden habe, was ich suche, in diesem Fall ein Zitat.

Ich weiß von der Verwendung von Dingen wie Java, dass es tatsächlich möglich ist, aber es erweist sich als schwieriger als ich in RN dachte. Wenn ich einen JS-Break verwende, sagt es einfach einen Syntaxfehler, gibt es irgendwelche break Anweisungen in RN?

quotes.quotesArray.map((quote, i) => { 
    if(!quote.isRead){ 
     return <Text key={i} style={styles.container, styles.quote}>{quotes.quotesArray[i].quotation}</Text>;      
     break; 
    } else { 
     return 
    } 
}) 

Answer 1

Es gibt keine Möglichkeit, die Array.prototype.map vorzeitig zu brechen. Es sieht so aus, als ob Sie das erste Element mit dem Prädikat !quote.isRead rendern möchten. Wenn das der Fall ist, können Sie Array.prototype.find verwenden, um das erste ungelesene Zitat zu finden und es dann zu rendern, wenn es existiert.

var unreadQuote = quotes.quotesArray.find(quote => !quote.isRead) 
render() { 
    return (
    unreadQuote && 
    <Text style={styles.container, styles.quote}>{unreadQuote.quotation}</Text>; 
) 
} 

Answer 2

Das Problem ist, dass Sie Rückkehr die nächste Schleife beginnt, so dass es nie die break trifft, hier ist eine andere Art und Weise Sie dies einrichten können. Bearbeitet für for-Schleife von forEach für Pause, um gültig zu sein.

const quote = []; 
for (let i = 0; i < quotes.quotesArray.length; i++) { 
    if (!quote.isRead[i]) { 
    quote.push(<Text key={i} style={styles.container, styles.quote}>{quotes.quotesArray[i]}</Text>); 
    break; 
    } 
} 

Sie könnten auch lodash der .find() Methode verwenden, um die Anordnung und das Rück das erste Element zu filtern, die in Ihrer Callback-true zurück und diese Daten für Ihre Textelement verwenden.

Answer 3

ich tun würde, dies mit Filter und Karte und das Rendern der Komponente zu einer Funktion bewegen:

renderQuote(quote, i) { 
    return (
     <Text key={i} style={styles.container, styles.quote}> 
      {quote.quotation} 
     </Text> 
    ); 
} 

// On JSX 

{ quotes.quotesArray.filter((quote) => !quote.isRead).map((quote, i) => this.renderQuote(quote, i) }