React中三元运算符判断'messege'存在返回true却无内容渲染问题

我想在order对象包含messege属性时渲染order.messege，控制台打印'messege' in order返回true，但页面并没有渲染对应的内容。

控制台输出验证了'messege'确实存在于order对象中，以下是我的代码：

<div>
  { typeof(orderData) !== 'undefined' && orderData !== null ?
    <div>
      {orderData.reverse().map( (order, index) => {
        console.log('messege' in order)
        console.log(order)
        { 'messege' in order ?
          <div>
            <h1>{order.messege}</h1>
          </div>
         :
         <div>
           <h1>roll back</h1>
         </div>
        }
        }
      )}
    </div>
    :
    <h1>no orders</h1>
  }
</div>

• 核心问题：map回调函数里的条件判断部分没有返回JSX元素。逻辑判断虽然执行了，但生成的元素没被返回给map，所以页面不会渲染任何内容。
• 修复方法：要么给条件判断加上return，要么简化箭头函数写法（箭头函数用括号包裹表达式时会自动返回内容）。

修复后的代码示例1（添加return） #

<div>
  { typeof(orderData) !== 'undefined' && orderData !== null ?
    <div>
      {orderData.reverse().map( (order, index) => {
        console.log('messege' in order)
        console.log(order)
        // 添加return返回JSX元素
        return 'messege' in order ?
          <div key={index}>
            <h1>{order.messege}</h1>
          </div>
         :
         <div key={index}>
           <h1>roll back</h1>
         </div>
      })}
    </div>
    :
    <h1>no orders</h1>
  }
</div>

修复后的代码示例2（简化箭头函数） #

<div>
  { typeof(orderData) !== 'undefined' && orderData !== null ?
    <div>
      {orderData.reverse().map( (order, index) => (
        // 用括号包裹，箭头函数自动返回内容
        'messege' in order ?
          <div key={index}>
            <h1>{order.messege}</h1>
          </div>
         :
         <div key={index}>
           <h1>roll back</h1>
         </div>
      ))}
    </div>
    :
    <h1>no orders</h1>
  }
</div>

额外提示 #

• 给map生成的元素加上唯一key属性（比如示例中的index，有唯一ID的话用ID更好），避免React警告。
• reverse()会修改原数组，若不想改变原数组，可先复制再反转：[...orderData].reverse()

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