NextJS项目中两段相同JSX map()渲染逻辑仅第二段生效问题排查

问题原因 #

两段map的差异本质是箭头函数的返回值规则不同，和JSX、NextJS本身没有关联：

• 第一段map的回调函数使用花括号{}包裹函数体，这种属于箭头函数的常规写法，若没有主动添加return关键字声明返回值，函数默认返回undefined。你代码里的三元表达式没有被return出去，所以map遍历完成后得到的是一个全为undefined的数组，React渲染时会直接忽略这类无效值，自然不会渲染任何内容。
  如果你要保留花括号写法，只需要加上return关键字即可：

  navList.map((navItem) => {
    return navItem === "Home" ? 
    <Link href="/" key={navItem}><a>{navItem}</a></Link> : 
    <Link href={`../${navItem}`} key={navItem}><a>{navItem}</a></Link>
  })
  

• 第二段map的回调函数使用圆括号()包裹内容，这是箭头函数的隐式返回语法，会直接把括号内的表达式执行结果作为返回值返回，不需要额外写return关键字，所以每个遍历项都返回了对应的Link组件，React可以正常识别渲染。

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