JavaScript中使用.map()函数处理API返回数据时的内容格式优化问题

嘿，我懂你遇到的问题啦！你现在的内层map()会给每个对手单独渲染一个<p>标签，所以才会每行显示一个Team条目。要把它们合并成一行用-分隔的格式，根本不用slice()，换个思路就能搞定👇

修改后的代码 #

<div className="boxer">
  {users.map((user) => (
    <div className="scoreBoxx" key={user.id} id={user.id}>
      <h2 className="CardTitle">{user.videogame.name}</h2>
      {/* 这里把内层map改成提取名字后拼接 */}
      <p className={user.opponents[0]?.acronym}>
        <b>Team :</b> {user.opponents.map(sub => sub.opponent.name).join(' - ')}
      </p>
    </div>
  ))}
</div>

关键变化说明 #

1. 不再渲染多个<p>标签：原来的内层map()循环每个对手都生成一个新的<p>，现在我们先用map()提取所有对手的名字到一个数组（比如["ZdrastvyteTimur", "xStiKz"]）
2. 用join()合并字符串：调用数组的join(' - ')方法，把数组里的元素用-连接成一个完整的字符串，这样就只会生成一个<p>标签，内容就是你想要的Team : ZdrastvyteTimur - xStiKz

额外优化（可选） #

如果担心opponents数组为空的情况，可以加个判断避免显示空内容：

<p className={user.opponents[0]?.acronym}>
  <b>Team :</b> {user.opponents.length > 0 ? user.opponents.map(sub => sub.opponent.name).join(' - ') : 'No opponents'}
</p>

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