React.js中使用map渲染ExpenseItem组件无显示问题求助

你的代码里map回调函数没有返回组件，导致React无法渲染ExpenseItem。

修复方法 #

方法1：显式添加return语句 #

修改map的回调逻辑，在大括号内用return返回组件：

{props.items.map( (expense) =>{
  return <ExpenseItem
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
  />
})}

方法2：使用箭头函数隐式返回 #

把回调的大括号{}换成小括号()，箭头函数会自动返回括号内的内容：

{props.items.map( (expense) => (
  <ExpenseItem
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
  />
))}

额外注意事项 #

React列表渲染要求每个子元素必须有唯一的key属性，避免控制台警告，建议给ExpenseItem加上：

{props.items.map( (expense) => (
  <ExpenseItem
      key={expense.id} // 确保expense对象有唯一的id字段，若无可用其他唯一标识如日期+标题组合
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
  />
))}

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