React根据对象生成UI时console.log正常但界面无元素渲染问题

问题根因 #

• 核心原因是你使用了forEach方法遍历数据，forEach仅执行回调逻辑不会返回任何值，所以即使你在回调内写了JSX结构，React也无法拿到需要渲染的节点，这就是控制台打印正常但界面无元素的直接原因。
• 其次当前this.props.languages已经是对象数组结构，不需要再通过Object.entries做转换，直接使用数组的map方法即可，map会遍历每一项并返回新的元素数组，完全匹配React列表渲染的要求。
• 额外隐性问题：你给每个label设置了相同的id="checkbox-margin"，DOM规范要求id全局唯一，重复id会引发潜在的选择器异常，建议替换为className；另外React要求列表遍历生成的节点需要添加唯一key属性，避免出现渲染异常。

修正后代码示例 #

{
  this.props.languages.map((langItem) => (
    <label className="checkbox-margin" key={langItem.lang_num}>
      <input
        type="checkbox"
        value={langItem.language_name}
        checked={langItem.checked}
        onChange={this.handleLangClick}
      /> {langItem.language_name}
    </label>
  ))
}

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