React使用map遍历数组渲染列表无内容显示的问题求助

代码没有按预期渲染列表且控制台无报错，核心是JavaScript的**自动分号插入（ASI）**机制触发了非预期行为：代码本身语法完全合法，只是返回值不符合渲染预期，因此不会抛出错误。
两处触发问题的代码位置：

• 组件根作用域的return单独占一行，JS解析时会自动在return末尾补充分号，等价于执行return;，函数直接返回undefined，后续的test.map(...)逻辑不会作为返回值被返回。
• map遍历的回调函数中，return同样单独占行，也会被自动补充分号，等价于回调每次执行都返回undefined，即使修复第一处return的问题，最终也无法渲染出预期的div内容。

修复的核心是避免return关键字和要返回的内容分属两行，换行书写返回内容时用小括号包裹即可规避ASI问题。

最小改动修复代码 #

import React from 'react';
import "./css/App.css"


const App= () =>{
  const test=["1","2"];
  // return与待返回的map逻辑同行
  return test.map((item)=>{
    // 回调内return与JSX同行
    return <div key={item} >{item}</div>
  })
}

export default App;

更规范的换行写法 #

返回内容较长需要换行时，统一用小括号包裹返回值，是React社区的通用编码习惯：

import React from 'react';
import "./css/App.css"

const App= () =>{
  const test=["1","2"];
  return (
    <React.Fragment>
      {test.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </React.Fragment>
  )
}

export default App;

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