ReactJS遍历数组时HTML标签未渲染但控制台有输出是什么原因

你代码的核心问题出在Array.prototype.map的回调函数写法上：

• 你使用了带花括号{}的箭头函数体，但没有显式返回<h1>标签，map遍历生成的数组所有元素都是undefined，React不会渲染undefined类型的值，因此页面看不到h1元素。
• console.log是在回调函数体内同步执行的代码，不管有没有返回值都会正常运行，因此控制台可以正常打印对应值。

有两种常用修复方式：

方案1：使用箭头函数隐式返回 #

如果不需要额外执行其他代码，去掉回调函数的花括号即可，箭头函数会自动返回箭头后的表达式结果。注意React列表渲染需要为每个元素指定唯一的key属性，避免控制台抛出警告。

import React from "react";

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => <h1 key={x}>{x}</h1>)}
    </div>
  );
}

export default NameList;

方案2：显式添加return语句 #

如果需要保留console.log等额外逻辑，保留花括号的同时手动添加return返回需要渲染的元素即可：

import React from "react";

function NameList(props) {
  const names = ["Bruce", "Clark", "Diana"];
  return (
    <div>
      {names.map((x) => {
        console.log({ x });
        return <h1 key={x}>{x}</h1>;
      })}
    </div>
  );
}

export default NameList;

箭头函数的返回规则：

• 不带花括号：自动返回箭头后表达式的执行结果
• 带花括号：必须手动写return语句指定返回值，无return时默认返回undefined

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