React JS组件map函数不生效，控制台打印正常但页面无内容展示

问题原因 #

你使用map方法的回调函数没有返回要渲染的JSX元素，导致遍历后得到的是全为undefined的数组，React会直接忽略这类无效渲染内容，因此页面没有对应展示，控制台能正常打印products是因为模块导入逻辑没有问题。

箭头函数存在两种返回规则：

• 使用大括号{}包裹函数体时，必须显式使用return语句才会返回结果
• 不使用大括号，或者用小括号()包裹表达式时，会隐式返回表达式的执行结果

你当前代码里的map回调用了大括号包裹，但没有写return，所以没有返回任何可渲染的内容。

修复方案 #

有两种修改方式可选：

方案1：使用隐式返回（推荐，写法更简洁） #

修改HomeScreen组件里的map逻辑，把大括号改成小括号：

{products.map(product => (
    <h3 key={product._id}>{product.name}</h3>
))}

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

在大括号内添加return关键字：

{products.map(product => {
    return <h3 key={product._id}>{product.name}</h3>
})}

修改后保存代码即可正常渲染产品名称列表。

内容的提问来源于stack exchange，提问作者Abdullah Ibn Shahin