React中如何从对象数组创建元素？数据存在却无渲染问题排查

你的Test子组件渲染代码存在两个关键问题，导致页面无法显示内容：

1. map回调函数未返回JSX元素 #

你使用了带大括号的箭头函数，但仅在内部编写了<h1>和<h2>标签，没有通过return语句将这些JSX元素返回。React不会自动将大括号内的JSX视为返回值，因此map最终返回的是一组undefined，页面自然没有内容输出。

2. 单个map迭代返回多个同级元素违反React规则 #

React要求组件或渲染逻辑只能返回单个根元素，你在每个map循环中直接返回<h1>和<h2>两个同级元素，这会触发React的渲染报错（可能你没注意到控制台的错误提示）。

修复后的代码示例 #

写法一：显式return + Fragment包裹

{myArray.map((elem) => {
  return (
    <>
      <h1 key={elem.name}>{elem.name}</h1>
      <h2>{elem.url}</h2>
    </>
  );
})}

写法二：箭头函数隐式返回（省略大括号）

{myArray.map((elem) => (
  <>
    <h1 key={elem.name}>{elem.name}</h1>
    <h2>{elem.url}</h2>
  </>
))}

额外提示：添加key属性 #

使用map渲染列表时，必须给每个元素添加唯一的key属性（示例中用elem.name，如果存在重复风险，建议使用唯一ID），这能帮助React高效更新列表，避免不必要的重渲染和控制台警告。

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