如何在React.js中引用嵌套数组中的元素？

问题核心：contacts是数组类型而非单个对象，直接访问.label无法获取对应值；同时map回调的参数名与原数组名重复，易引发变量遮蔽问题。

修正步骤： #

1. 优化变量命名（避免遮蔽） #

将map回调的参数从detailConfig改为语义化名称（如product），提升代码可读性：

detailConfig.map(product => { ... })

2. 处理contacts数组 #

根据需求选择以下两种实现方式：

方式一：展示所有联系人的label

若需渲染每个产品下的全部联系人label，需对product.contacts嵌套一次map遍历：

import "./styles.css";
import { detailConfig } from "./config";

export default function App() {
  return (
    <div className="App">
      {detailConfig.map((product, index) => (
        <div key={index}>
          <h1>{product.name}</h1>
          {product.contacts.map((contact, idx) => (
            <p key={idx}>{contact.label}</p>
          ))}
        </div>
      ))}
    </div>
  );
}

注意：为循环生成的元素添加key属性，符合React列表渲染的规范要求。

方式二：展示特定位置的label（如第一个）

若仅需渲染每个产品下第一个联系人的label，直接通过数组索引访问即可，同时建议使用可选链操作符避免空数组报错：

import "./styles.css";
import { detailConfig } from "./config";

export default function App() {
  return (
    <div className="App">
      {detailConfig.map((product, index) => (
        <div key={index}>
          <h1>{product.name}</h1>
          <p>{product.contacts[0]?.label}</p>
        </div>
      ))}
    </div>
  );
}

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