React项目使用map遍历如何仅取第一个元素避免按钮重复渲染

方案说明 #

可以使用indexOf相关逻辑实现去重需求，可根据实际业务场景选择以下两种适配方案：

方案1：同链接仅保留1个按钮（多链接仍渲染多个）

如果你的需求是对返回结果中detailsUrl重复的条目去重，不同链接仍保留对应按钮，可先对数组去重后再遍历：

const ButtonGroup = (linksReturn) => {
  // 按照detailsUrl字段去重，仅保留每个链接第一次出现的条目
  const uniqueLinkList = linksReturn.filter((item, index, self) => 
    self.findIndex(i => i.detailsUrl === item.detailsUrl) === index
  )
  return uniqueLinkList.map((urlAdress, index) => (
    <div key={index}>
        {/* 注意：原生button不支持href属性，建议替换为a标签实现跳转 */}
        <a
          target="_blank"
          href={urlAdress.detailsUrl}
          rel="noopener noreferrer"
        >
          Acess Link
        </a>
      </div>
  ));
};

方案2：无论返回多少条仅渲染1个按钮

如果你的需求是永远只渲染1个按钮（默认取第一条返回结果的链接），不需要使用map遍历，直接取数组第一项即可，性能更高：

const ButtonGroup = (linksReturn) => {
  // 空值判断避免数组为空时报错
  if (!Array.isArray(linksReturn) || !linksReturn.length) return null
  return (
    <div>
      <a
        target="_blank"
        href={linksReturn[0].detailsUrl}
        rel="noopener noreferrer"
      >
        Acess Link
      </a>
    </div>
  )
};

额外优化提示 #

你代码中给button添加href属性的写法不符合规范，原生button标签没有href属性，跳转功能建议替换为a标签，并补充rel="noopener noreferrer"属性避免新页面安全风险。

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