ES6地图显示失败，在控制台

Question

没有错误在我的渲染功能我做的console.log（项目），我得到这个

但为什么我的渲染输出什么？

{items.map(item => { 
    <li key={item.id}>item.name</li> 
})} 

Answer 1

你身边缺少箭头函数体return语句，并且还花括号item.name，在JSX插值所需的语法。

{items.map(item => { 
     return <li key={item.id}>{item.name}</li> 
// ^     ^  ^
})} 

看看JSX In Depth，它有很多细节，你可能会发现有帮助。

Answer 2

{items.map(item => { 
    <li key={item.id}>item.name</li> 
})} 

这不会从映射函数返回<li />。你需要的是：

{items.map(item => <li key={item.id}>item.name</li>)} 

含蓄地返回<li />或做：

{items.map(item => { 
    return <li key={item.id}>item.name</li> 
})} 

Answer 3

你忘了回报）

{items.map(item => { 
     return <li key={item.id}>item.name</li> 
    })} 

，或者可以这样写

{items.map(item => <li key={item.id}>item.name</li> )}