React native 终止react native中的映射循环

我试图打破一个循环，一旦我找到了我想要的，在这个例子中是一个报价

通过使用Java之类的东西，我知道这实际上是可能的，但事实证明这比我在RN中想象的要困难得多。当我使用JS break时，它只是说这是一个语法错误，RN中有任何

break

语句吗

quotes.quotesArray.map（（quote，i）=>{
如果（！quote.isRead）{
返回{quotes.quotesArray[i].QUOTE}；
打破
}否则{
返回
}
})

问题在于，您返回的代码将启动下一个循环，因此它不会到达

中断

，下面是另一种设置方法。编辑为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;
  }
}

const quote=[]；
for（设i=0；i

---

您还可以使用lodash的.find（）方法来过滤数组，并返回回调中第一个返回true的元素，并将该数据用于文本元素。

无法过早地中断该数组。看起来您想要呈现与

匹配的第一个元素！quote.isRead

谓词。如果是这种情况，您可以使用查找第一个未读报价，然后呈现它（如果存在）

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

var unreadQuote=quotes.quotesArray.find（quote=>！quote.isRead）
render（）{
返回(
未付款报价&&
{unreadQuote.quote}；
)
}

我将使用过滤器和贴图来执行此操作，并将组件的渲染移动到函数：

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

renderQuote（quote，i）{
返回(
{quote.quote}
);
}
//关于JSX
{quotes.quotesArray.filter（（quote）=>！quote.isRead.map（（quote，i）=>this.renderQuote（quote，i）}

break；

不能在那个地方使用。@zerkms是的，完全忘记了你不能中断forEach，它必须设置为一个常规的“for循环”，以便中断工作。它说中断是一个“非同步中断”-这是否意味着有一个break语句将在React Native中工作？奇怪的是React Native中的

break

语句与浏览器中使用的

break

语句相同。它遵循相同的规则。这意味着它们在

while

和

for

循环和

开关

stateme中使用例如，nts。

break

在

map

循环中不可用，在这种情况下，请使用

for

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