React Native条件渲染异常：满足条件时/hr后缀未显示

问题描述 #

开发React Native应用时，需根据booking.rate_per_hour是否大于0，给应付金额添加/hr后缀。日志已确认booking.rate_per_hour的值大于0，但条件渲染{booking.rate_per_hour > 0 ? "/hr" : ""}始终不生效，移除条件后/hr能正常显示。

可能原因及解决方案 #

1. 数据类型不匹配 #

booking.rate_per_hour大概率是字符串类型的数字（比如"15"），虽然JavaScript会做隐式类型转换，但部分场景下（比如字符串格式异常、空值）会导致比较逻辑失效。

解决办法：将值转为数字后再做比较：

// 替换原条件判断
{Number(booking.rate_per_hour) > 0 ? "/hr" : ""}

更严谨的写法（先处理空值再转换）：

{booking?.rate_per_hour != null && parseFloat(booking.rate_per_hour) > 0 ? "/hr" : ""}

2. 确认组件接收的实际数据 #

虽然日志显示rate_per_hour大于0，但组件渲染时可能没拿到最新的props值。可以在组件中添加日志，确认渲染时的实际值和类型：

// 组件内添加日志排查
console.log("当前rate_per_hour值:", booking?.rate_per_hour, "类型:", typeof booking?.rate_per_hour);

如果数据未更新，检查父组件是否正确传递booking props，或通过useEffect监听booking的变化。

3. 简化逻辑便于排查 #

把条件判断抽离成独立变量，让逻辑更清晰：

// 组件内部定义变量
const showHourSuffix = booking?.rate_per_hour != null && Number(booking.rate_per_hour) > 0;

// 在Text组件中使用
{showHourSuffix ? "/hr" : ""}

优化后的完整代码示例 #

// 先处理重复逻辑
const showHourSuffix = booking?.rate_per_hour != null && Number(booking.rate_per_hour) > 0;
const payableAmount = payDetails.payableAmount 
  ? parseFloat(payDetails.payableAmount).toFixed(settings.decimal) 
  : 0.0;

{settings.swipe_symbol === false ? (
  <Text style={{color: colors.START_TRIP, textAlign: isRTL ? "right" : "left", lineHeight: 45, fontSize: 24, fontFamily: fonts.Bold}}>
    {settings.symbol}{" "}
    {payableAmount}
    {showHourSuffix ? "/hr" : ""}
  </Text>
) : (
  <Text style={{color: colors.START_TRIP, textAlign: isRTL ? "right" : "left", lineHeight: 45, fontSize: 24, fontFamily: fonts.Bold}}>
    {payableAmount}{" "}
    {settings.symbol}
    {showHourSuffix ? "/hr" : ""}
  </Text>
)}

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