如何实现Connect与Connected按钮状态切换？MySQL连接列表问题求助

我有一个MySQL数据库，其中包含名为connectionList的数组。该数组为每个用户存储若干带有senderID和receiverID字段的对象，当用户无待处理连接请求时数组会为空。

我已成功通过遍历数组将数据渲染到浏览器，但在使用if-else语句实现按钮状态切换时遇到问题：当connectionList为空或不存在与登录用户id匹配的senderID时，按钮显示Connect；当数组中存在senderID与登录用户id匹配的对象时，按钮显示Connected。

已尝试的代码 #

{connectionList && connectionList.map(function (conn){
  if(conn.senderID === user.id){
         return <>Connected</>
  } else {
         return <>Connect</>
  }
})}

解决方案 #

问题分析 #

当前代码会遍历connectionList中的每一个对象，每匹配到一个就返回一次状态文本，导致数组有多少个对象就渲染多少份内容，无法实现“根据是否存在匹配项显示单一状态”的需求。

修复代码 #

无需遍历整个数组，使用some()方法判断数组中是否存在符合条件的对象，再通过三元运算符返回对应状态：

{connectionList?.some(conn => conn.senderID === user.id) ? <>Connected</> : <>Connect</>}

代码说明

• connectionList?.some(...)：可选链操作符?.避免connectionList为null或undefined时触发报错；some()方法会检查数组中是否至少有一个元素满足条件，找到匹配项立即返回true，否则返回false。
• 三元运算符根据some()的结果决定显示Connected还是Connect，确保只渲染一份状态文本。

如果需要兼容不支持可选链的环境，可改用短路判断：

{(connectionList && connectionList.some(conn => conn.senderID === user.id)) ? <>Connected</> : <>Connect</>}

内容的提问来源于stack exchange，提问作者SwiftDev