Завершить цикл карты в ответном нативном

Question

Я пытаюсь вырваться из цикла, как только я нашел то, что искал, в данном случае цитату.

Я знаю из-за использования таких вещей, как Java, что на самом деле возможно, однако это оказывается более сложным, чем я думал в RN. Когда я использую разрыв JS, он просто говорит о своей синтаксической ошибке, есть ли в RN break операторов?

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

Нельзя досрочно разорвать Array.prototype.map. Похоже, вы хотите отобразить первый элемент, соответствующий предикату !quote.isRead. Если это так, вы можете использовать Array.prototype.find, чтобы найти первую непрочитанную цитату, а затем визуализировать ее, если она существует.

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

Answer 2

Проблема заключается в том, что вы возвращение начинается следующий цикл так, он никогда не попадает в break, вот еще один способ, которым Вы могли бы установить это. Отредактировано для цикла loop из forEach для разрыва, чтобы быть действительным.

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; 
    } 
} 

Вы также можете использовать метод lodash в .find() для фильтрации массива и возвращает первый элемент, который возвращает истину в вашей функции обратного вызова и использовать эти данные для элемента текста.

Answer 3

Я хотел бы сделать это с фильтром и карты и переместить визуализации компонента функции:

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) }