React遍历数组渲染重复name，但控制台显示不同值的问题排查

我来帮你拆解下这段代码里的两个核心问题，正是它们导致了你看到的矛盾现象：

1. 箭头函数语法错误，导致返回值异常 #

你在map的箭头函数里写错了代码结构——console.log后面多了一个不必要的大括号，这会让JavaScript解析代码时出现逻辑混乱。原代码的这段结构：

const rowData = this.state.market.map((market) => { console.log("details", market["info"]) { return { ... }; } });

相当于在箭头函数的函数体里嵌套了一个无意义的代码块，虽然浏览器可能不会直接抛出语法错误，但return的作用域会被打乱，最终map可能无法正确返回每个market对应的对象，进而导致渲染数据异常。

修正方法：去掉console.log后面的多余大括号，给console.log加上分号，规范函数体结构：

const rowData = this.state.market.map((market) => { 
  console.log("details", market["info"]);
  return { 
    marketInfo: ( 
      <div> 
        {market && !!market["info"] ? ( 
          <div> 
            <p>{market["info"]["name"]}</p> 
          </div> 
        ) : null} 
      </div> 
    ), 
    place: "place", 
    area: "area", 
    action: "action", 
  }; 
});

2. 缺少唯一key属性，导致React组件复用异常 #

即使修正了语法，如果你在渲染rowData对应的列表/表格行时，没有给每个元素添加唯一的key属性，React就无法区分不同的列表项，会复用之前渲染的组件实例。这就会出现你看到的情况：map里的console.log能打印出不同的name，但页面上所有项显示的都是同一个name——因为React没有更新组件内容，而是直接复用了旧的组件。

修正方法：在渲染rowData的地方，给每个列表项加上唯一的key，优先使用数据本身的唯一标识（比如market.id）。比如：
先在生成rowData时带上唯一标识：

const rowData = this.state.market.map((market) => { 
  console.log("details", market["info"]);
  return { 
    uniqueKey: market.id, // 假设每个market都有唯一的id字段
    marketInfo: ( 
      <div> 
        {market && !!market["info"] ? ( 
          <div> 
            <p>{market["info"]["name"]}</p> 
          </div> 
        ) : null} 
      </div> 
    ), 
    place: "place", 
    area: "area", 
    action: "action", 
  }; 
});

然后渲染时使用这个唯一标识作为key：

<table>
  <tbody>
    {rowData.map(item => (
      <tr key={item.uniqueKey}>
        <td>{item.marketInfo}</td>
        <td>{item.place}</td>
        <td>{item.area}</td>
        <td>{item.action}</td>
      </tr>
    ))}
  </tbody>
</table>

总结 #

先修正箭头函数的语法错误，确保map能正确返回每个对象；然后给列表项添加唯一的key属性，让React能正确区分每个组件实例，这样页面就能显示出正确的不同name了。

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