ReactJS遍历对象内数组报错：无法读取contact_number属性

先说说你遇到的报错原因：你当前代码里的props.data[data.id].contact_number写法是错误的——data已经是props.data.map遍历出来的单个Person对象了，完全不需要再通过props.data[data.id]去二次查找。比如你的数据示例里id是7，但它在数组里的索引可能是0，props.data[7]自然就是undefined，这就是触发Cannot read property 'contact_number' of undefined错误的根源。

接下来我们同时解决报错和你的格式化需求：把每个号码用<strong>包裹，并用<strong>,</strong>分隔。这里要注意React不能直接拼接HTML字符串（除非用dangerouslySetInnerHTML，但不推荐），我们用React元素数组的方式来实现：

const ContactList = (props) => (
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Contact Numbers</th>
          <th>Address</th>
          <th>Email</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {props.data.map(data => (
          <tr key={data.id}>
            <td>{data.name}</td>
            <td>
              {/* 处理联系人号码的格式化 */}
              {data.contact_number.flatMap((number, index) => {
                // 第一个号码前面不需要分隔符
                if (index === 0) {
                  return <strong key={number}>{number}</strong>;
                }
                // 后续号码先加分隔符，再加号码
                return [
                  <strong key={`sep-${index}`}>,</strong>,
                  <strong key={number}>{number}</strong>
                ];
              })}
            </td>
            <td>{data.address}</td>
            <td>{data.email}</td>
            <td>{data.note}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

关键修改点说明： #

• 移除了错误的props.data[data.id]，直接使用data.contact_number遍历当前Person的号码数组
• 用flatMap生成包含号码和分隔符的React元素数组：
  • 第一个号码直接返回包裹<strong>的元素
  • 后续号码先返回作为分隔符的<strong>,</strong>，再返回当前号码的<strong>元素
  • 给每个元素加上唯一的key，符合React列表渲染的规范

这样修改后，不仅彻底解决了TypeError的问题，还完美实现了你要的号码格式化效果——每个号码都在<strong>标签里，号码之间用<strong>,</strong>分隔。

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