React中使用.map遍历数组时避免内容重复显示的问题

你代码里重复显示name的核心原因是嵌套了两层map：外层遍历NEXT_JS_COOL_SITES数组的每个对象，内层又遍历每个对象的键（每个对象有name和url两个键，所以每个对象会生成两个一模一样的列表项）。

直接修改代码，去掉多余的内层map即可：

export default function JSArticles() {
  return <List>
    {NEXT_JS_COOL_SITES?.map((info, index) => {
      return (
        <ListItem key={index}>
          <a href={info.url}>
            <Typography>{info.name}</Typography>
          </a>
        </ListItem>
      )      
    })}
  </List>
}

说明： #

• 删掉内层的Object.keys(info).map，因为我们不需要遍历对象的每个键，直接使用每个对象自带的name和url属性就够了
• 把key绑定到外层map的index参数上（如果后续数据里每个对象有唯一标识，比如id，用id当key会更符合React的性能优化要求）
• 修改后每个数组对象只会生成一个列表项，不会再重复显示

如果担心数据源里存在重复的name值（目前你提供的示例数据没有），可以先对数组去重再渲染，代码如下：

export default function JSArticles() {
  // 按name字段对数组去重
  const uniqueSites = [...new Map(NEXT_JS_COOL_SITES?.map(item => [item.name, item])).values()];
  
  return <List>
    {uniqueSites.map((info, index) => {
      return (
        <ListItem key={index}>
          <a href={info.url}>
            <Typography>{info.name}</Typography>
          </a>
        </ListItem>
      )      
    })}
  </List>
}

内容的提问来源于stack exchange，提问作者Clay.jpg