三元条件运算符未按预期运行，仅PROCESSED生效IN_TRANSIT不生效

你写的三元运算判断逻辑存在逻辑运算符使用错误：
item?.orderItemStatus?.name === ('PROCESSED' || 'IN_TRANSIT') 这段代码里，('PROCESSED' || 'IN_TRANSIT') 不会按照你预期的「匹配两个值中的任意一个」运行。

JavaScript 中逻辑或 || 的求值规则为：从左到右判断操作数的布尔真值，返回第一个为真的操作数，直接忽略后续所有操作数。
'PROCESSED' 是非空字符串，属于永久真值，因此整个括号内表达式的返回值永远是 'PROCESSED'，你的判断条件实际等价于 item?.orderItemStatus?.name === 'PROCESSED'，自然只有状态为PROCESSED时才会渲染组件。

你可以任选以下两种方案修改：

• 分开写两个全等判断，用逻辑或连接：

{item?.orderItemStatus?.name === 'PROCESSED' || item?.orderItemStatus?.name === 'IN_TRANSIT' ? (
            <ReturnItemButton orderItem={item} />
          ) : null} 

• 用数组的includes方法实现多值匹配，后续新增状态时修改更方便：

{['PROCESSED', 'IN_TRANSIT'].includes(item?.orderItemStatus?.name) ? (
            <ReturnItemButton orderItem={item} />
          ) : null} 

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