es6映射无法呈现，控制台中没有错误

Question

在我的渲染功能中，我执行console.log（items）我得到了这个

但为什么我的渲染输出什么都没有？

{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>  )}