React JS中映射嵌套对象数据（语言对象）报错求助

错误原因解析 #

1. country.languages.map is not a function：map是数组专属方法，而你的languages是键值对对象（比如{fra: "French", gsw: "Swiss German"}），对象没有map方法，直接调用必然报错。
2. Cannot convert undefined or null to object：当部分数据里的languages为null或undefined时，直接给Object.keys()这类方法传空值，JS会抛出类型错误——这类方法要求参数必须是合法对象。

解决方案与代码示例 #

核心思路是先做空值防护，再把对象转换为可遍历的数组，以下是几种实用写法：

方法1：短路求值 + Object.entries（推荐） #

用&&做短路判断，确保languages存在后再处理；Object.entries()会把对象转成[键, 值]格式的数组，一次性拿到语言代码和名称：

// 组件渲染部分
return (
  <div className="country-card">
    <h2>{country.name}</h2>
    <h3>官方语言：</h3>
    {/* 先判断languages是否存在，避免空值报错 */}
    {country.languages && Object.entries(country.languages).map(([code, langName]) => (
      <span key={code} className="language-tag">
        {code.toUpperCase()} - {langName}
      </span>
    ))}
  </div>
);

方法2：空值合并操作符（更简洁） #

用??空值合并操作符，当languages为null/undefined时，自动替换为空对象{}，确保Object.entries()始终能拿到合法参数：

return (
  <div className="country-card">
    <h2>{country.name}</h2>
    <h3>官方语言：</h3>
    {Object.entries(country.languages ?? {}).map(([code, langName]) => (
      <span key={code} className="language-tag">
        {code.toUpperCase()} - {langName}
      </span>
    ))}
  </div>
);

方法3：只展示语言名称（用Object.values） #

如果不需要语言代码，直接用Object.values()提取所有值组成数组：

return (
  <div className="country-card">
    <h2>{country.name}</h2>
    <h3>官方语言：</h3>
    {Object.values(country.languages ?? {}).map((langName, index) => (
      <span key={index} className="language-tag">
        {langName}
      </span>
    ))}
  </div>
);

关键知识点 #

• 对象转数组的常用方法：
  • Object.keys(obj)：提取对象的所有键，返回键数组
  • Object.values(obj)：提取对象的所有值，返回值数组
  • Object.entries(obj)：提取键值对，返回[key, value]格式的数组
• 空值防护的必要性：后端返回的数据经常存在缺失或空值，React渲染时必须提前处理，避免触发JS运行时错误。

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