使用map()函数为按钮传递URL数组后点击无法跳转至对应页面如何解决

存在的问题 #

• productsLink 是数组类型，直接调用 productsLink.linkData 无法正确读取到链接列表，需要先取数组首位元素再读取 linkData 属性
• 原代码中 map 遍历返回的是 <span> 元素数组，将其直接赋值给 Button 的 href 属性不符合要求，href 需要接收字符串格式的链接地址
• 原代码仅渲染了单个 Button 组件，没有实现4个按钮的循环生成逻辑，无法对应4条不同的跳转链接

修正后代码 #

const productsLink = [
  {
    linkData: [
      { plink: "https://store.myshopify.com/products/gold-2" },
      { plink: "https://store.myshopify.com/products/white-gold-3" },
      { plink: "https://store.myshopify.com/products/gold-1" },
      { plink: "https://store.myshopify.com/products/silver" },
    ],
  },
];

return(
  <div>
    {/* 循环生成4个按钮，每个按钮绑定对应链接 */}
    {productsLink[0].linkData.map((product, index) => (
      <Button key={index} href={product.plink}>shop</Button>
    ))}
  </div>
)

逻辑说明 #

直接在渲染区域遍历 productsLink[0].linkData 数组，每个数组项对应生成一个 Button 组件，将当前项的 plink 属性值赋值给 Button 的 href 属性即可实现点击不同按钮跳转对应页面的需求。如果不需要保留 productsLink 的外层数组结构，也可以直接把 linkData 定义为数组，省去取数组首项的步骤。

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