React中map方法使用问题：循环渲染组件无输出

你遇到的问题核心是map回调函数没有返回组件，导致遍历后没有生成可渲染的元素数组，所以浏览器无输出；而逐个调用组件时是直接返回了组件实例，因此能正常显示。

具体错误点 #

在App组件的map回调中，你用了大括号{}包裹代码，但没有用return语句返回<ExpenseItem>组件：

{items.map((val, i) => {
    <ExpenseItem key={i} title={val.title} amount={val.amount}/>
})}

箭头函数使用大括号时属于代码块模式，必须显式通过return返回值，否则默认返回undefined。map遍历后得到的是全为undefined的数组，React不会渲染这类内容。

两种修正方式 #

方式1：添加return语句

{items.map((val, i) => {
    return <ExpenseItem key={i} title={val.title} amount={val.amount}/>
})}

方式2：省略大括号（单行表达式模式）

如果回调只有返回组件这一行代码，可以去掉大括号，箭头函数会自动返回表达式结果：

{items.map((val, i) => 
    <ExpenseItem key={i} title={val.title} amount={val.amount}/>
)}

额外说明 #

你的ExpenseItem组件代码没有问题，修正App组件的map回调后，就能正常遍历渲染所有条目了。

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