NextJS传递属性渲染p标签无内容问题排查（数据获取与展示）

你的代码存在两个核心问题，导致无法正常渲染内容：

1. Map回调函数未返回组件 #

在tickets.map的回调逻辑中，你用大括号{}包裹了<TicketGUI>组件，但箭头函数在大括号包裹下需要显式返回组件，否则不会生成任何渲染内容。

修复方式（二选一）： #

• 显式添加return语句：

{tickets.map(({id, creator, broken_item, issue_desc, loc, prio}) => {
  return <TicketGUI 
    key={id}
    creator={creator} 
    broken_item={broken_item} 
    issue_desc={issue_desc} 
    loc={loc} 
    prio={prio}
  />
})}

• 将大括号换成小括号，利用箭头函数的隐式返回特性：

{tickets.map(({id, creator, broken_item, issue_desc, loc, prio}) => (
  <TicketGUI 
    key={id}
    creator={creator} 
    broken_item={broken_item} 
    issue_desc={issue_desc} 
    loc={loc} 
    prio={prio}
  />
))}

注：React列表渲染必须给每个元素添加唯一key属性，这里用ticket.id是最优选择。

2. 直接渲染props对象导致无法解析 #

TicketGUI组件中直接返回<p>{props}</p>，但React无法直接渲染JavaScript对象，会触发渲染错误。需要提取具体属性值展示。

修复后的TicketGUI组件： #

export default function TicketGUI({ creator, broken_item, issue_desc, loc, prio }){
  return (
    <p>
      创建者：{creator}，损坏物品：{broken_item || '无'}，问题描述：{issue_desc || '无'}，位置：{loc || '无'}，优先级：{prio}
    </p>
  )
}

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