React中遍历对象所有属性值渲染为h1标签的实现方法

错误原因 #

你的原有代码存在几个导致无法正常渲染的问题：

• Object.keys(generic) 遍历返回的是对象的属性键名（即f1、f2），并非属性对应的值，你没有通过键名索引去获取实际要渲染的文本
• 循环渲染要求key属性必须绑定在循环返回的最外层元素上，你在外层使用了不支持传参的空Fragment短语法<></>，反而把key写在了内部的h1标签上，不符合React的渲染规则
• h1标签未闭合，标签内部也没有填入要渲染的内容

修正方案 #

直接替换你的渲染逻辑即可，两种写法都可以实现预期效果：

1. 使用Object.entries直接同时拿到键和值，代码更直观：

{Object.entries(generic).map(([attrKey, attrValue]) => (
  <h1 key={attrKey}>
    {attrValue}
  </h1>
))}

2. 如果你想继续沿用Object.keys的写法，通过键名索引取值即可：

{Object.keys(generic).map((gen) => (
  <h1 key={gen}>
    {generic[gen]}
  </h1>
))}

补充说明：如果循环返回的元素需要外层包裹多个同级标签，不能用<></>短语法，要使用完整的Fragment写法才能绑定key：<React.Fragment key={gen}>/* 多个同级标签写在这里 */</React.Fragment>，单根元素场景下不需要额外套Fragment。

最终渲染出的DOM结构和你预期的完全一致：

<h1>Hi, Stack Overflow!</h1>
<h1>Hello!</h1>

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