React.js中如何输出API返回的含动态属性对象的数据？

你当前的问题核心是：虽然用for-in循环能在控制台打印语言数据，但这段代码没有返回任何React可渲染的JSX元素，所以页面上看不到内容。针对这种键名动态的对象，我们可以借助Object.values、Object.entries这类方法将对象转为数组，再结合React的渲染逻辑处理。

方案1：快速拼接语言名称（仅显示名称） #

如果只需要展示语言名称，用Object.values提取所有语言值，再用join拼接成字符串即可，还能处理部分国家无languages属性的边界情况：

修改render方法中的渲染逻辑：

render() {
  this.state.countries.sort((a, b) => a.name.common > b.name.common ? 1 : -1)
  return (
    <div>
      {this.state.countries.map((item, index) => (
        <p key={index}>
          {item.name.common} {item.flag} {item.capital} {item.name.official}
          <br />
          官方语言：{item.languages ? Object.values(item.languages).join(', ') : '无官方语言'}
        </p>
      ))}
    </div>
  )
}

方案2：逐个渲染语言项（带代码+名称） #

如果需要同时展示语言代码和对应名称，用Object.entries把键值对转为数组，再嵌套map遍历渲染：

render() {
  this.state.countries.sort((a, b) => a.name.common > b.name.common ? 1 : -1)
  return (
    <div>
      {this.state.countries.map((item, index) => (
        <div key={index} style={{ marginBottom: '10px' }}>
          <p>{item.name.common} {item.flag} {item.capital} {item.name.official}</p>
          <div>
            <span>官方语言：</span>
            {item.languages ? (
              <ul style={{ display: 'inline-block', margin: '0 0 0 8px' }}>
                {Object.entries(item.languages).map(([code, name]) => (
                  <li key={code} style={{ display: 'inline-block', marginRight: '10px' }}>
                    {code} - {name}
                  </li>
                ))}
              </ul>
            ) : <span>无官方语言</span>}
          </div>
        </div>
      ))}
    </div>
  )
}

为什么之前的代码不生效？ #

你之前写的for-in循环只是在控制台输出数据，没有返回任何JSX元素。React的渲染逻辑要求你返回可渲染的节点（字符串、JSX元素或数组），所以直接在map里写for-in不会生成页面内容，必须把遍历结果转换成React能识别的渲染单元。

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