React无状态函数组件中return内map中执行console.log的方法

其实你遇到的是箭头函数写法和JSX表达式规则的小冲突，给你两个简单可行的测试方案：

方案1：改用箭头函数的显式函数体 #

把map的回调改成带花括号的显式函数体，先执行console.log，再返回JSX内容，这样既不会影响渲染，也能正常打印：

return (
  // 更多html/jsx代码
  {options.map(o => {
    // 这里直接执行console.log，不需要包裹{}，属于普通JS逻辑
    console.log(o);
    // 正常返回你的Fragment内容
    return (
      <>
        {/* 你的其他JSX元素 */}
      </>
    );
  })}
  // 更多html/jsx代码
);

方案2：在JSX表达式中用逗号运算符 #

如果坚持想用隐式返回的箭头函数，可以用逗号运算符让console.log执行后返回null（不会渲染任何内容），这样就能在Fragment里正常编译：

return (
  // 更多html/jsx代码
  {options.map(o => (
    <>
      {/* 逗号运算符执行console.log，最后返回null，不产生DOM节点 */}
      {console.log(o), null}
      {/* 你的其他JSX元素 */}
    </>
  ))}
  // 更多html/jsx代码
);

为什么原来的写法不行？ #

你之前单独写{options.map(o => ( {console.log(o)} ))}可行，是因为这里箭头函数隐式返回的是console.log(o)的结果（undefined），JSX允许渲染undefined（会直接忽略）；但放到Fragment里时，{console.log(o)}作为Fragment的子元素，部分编译器或校验工具会因“返回undefined作为JSX子元素”的规则报错（虽然理论上JSX允许，但实际开发中这类写法容易触发警告）。而直接写console.log(o)会被当作普通字符串渲染到DOM里，因为没加{}包裹，不属于JSX表达式。

测试用的话更推荐方案1，逻辑和JSX分离，可读性更好~

内容的提问来源于stack exchange，提问作者control-panel