JSX结合map函数进行条件渲染时组件无法正常渲染的问题排查

嘿，我一眼就瞅出问题所在啦！你这段代码的核心问题是箭头函数的返回值处理不对，导致React拿不到要渲染的组件。

问题根源 #

你在array.map()里用了带大括号{}的箭头函数，但没有显式写return语句。箭头函数的规则是：如果用大括号包裹代码块，必须通过return返回值；如果省略大括号，会自动隐式返回表达式的结果。你的代码里虽然条件判断为true，但因为没写return，map最终返回的是一堆undefined，自然不会渲染任何组件。

两种修复方法 #

方法1：用隐式返回（去掉大括号）

这是最简洁的写法，省略大括号后箭头函数会自动返回三元表达式的结果：

<div className={styles.container}> 
  {array.map(item => router.query.slug != item ? <Component /> : null)} 
</div>

方法2：保留大括号，添加显式return

如果需要在map里写更多逻辑，就保留大括号并手动返回组件：

<div className={styles.container}> 
  {array.map(item => { 
    // 这里可以加额外的逻辑代码
    return router.query.slug != item ? <Component /> : null; 
  })} 
</div>

额外建议（React最佳实践） #

别忘了给map生成的每个组件加上唯一的key属性，这能帮助React更高效地更新DOM，避免控制台警告：

{array.map(item => (
  router.query.slug != item ? <Component key={item} /> : null
))}

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