在条件呈现中响应中断.map()

Question

当条件呈现为真时，如何使用break破坏.map()函数？

这是我的示例代码

  {messages.length >= 1 ? (
   <div>
    {messages.reverse().map((e) => (
      e.senderName[0] == displayName[0] ? (<p>Status: {e.message}</p>) : null
    ))} 
   </div>
  ) : (<p>Status: Verifying...</p>)}

问题是，messages数组将每60秒添加一条新消息，我希望每60秒在屏幕上显示一条新消息。

然后，在将一条新消息添加到.map()数组并显示在屏幕上之后，我希望中断messages函数。

我想要的是这个在这里输入图像描述

但问题就像这个在这里输入图像描述

Answer 1

不能使用中断来停止.map()方法。我看到，如果消息属于当前用户，则您正在尝试呈现消息。

我可以建议您先过滤消息，然后用映射呈现经过筛选的数组。比如：

const usersMessages = messages.reverse().filter((e) => (e.senderName[0] === displayName[0]);

return (
<div>
{usersMessages.length > 0 ? (usersMessages.map(e =>{
return((<p>Status: {e.message}</p>))
})) : <p>Status: Verifying...</p>)}
</div>
)

当然，您必须在代码中有一个部分来更新消息数组，并在更新数据时触发重呈现。