React问题：状态变更时Material UI Drawer内容未渲染

云原生阿岚

2026-5-28

问题排查与解决

嘿，我一眼就揪出问题啦！你的map()回调函数里没有返回JSX元素，这就是动态生成的ListItem不显示的核心原因。

先看你这段代码：

{this.props.notifications.map((n, key) => { 
  <ListItem key={key}> 
    <ListItemIcon> 
      <Info/> 
    </ListItemIcon> 
    <ListItemText inset primary={n.header} secondary={n.message}/> 
  </ListItem> 
})}

当箭头函数用大括号{}包裹代码块时，必须显式写return语句来返回要渲染的内容，不然默认会返回undefined。这样map()就会生成一个全是undefined的数组，自然看不到任何动态渲染的列表项。

两种简单修正方案：

添加显式return：

{this.props.notifications.map((n, key) => { 
  return (
    <ListItem key={key}> 
      <ListItemIcon> 
        <Info/> 
      </ListItemIcon> 
      <ListItemText inset primary={n.header} secondary={n.message}/> 
    </ListItem> 
  )
})}

去掉大括号，用隐式return：
如果你的回调逻辑只有返回JSX这一步，直接去掉大括号，箭头函数会自动返回后面的表达式：

{this.props.notifications.map((n, key) => (
  <ListItem key={key}> 
    <ListItemIcon> 
      <Info/> 
    </ListItemIcon> 
    <ListItemText inset primary={n.header} secondary={n.message}/> 
  </ListItem> 
))}