React项目中布尔判断逻辑不符合预期问题求助

问题场景 #

React项目中有三个数据：

• data.leverageSelected（布尔类型）
• data['leverageRate']（数字类型）
• data['loanAmount']（数字类型）

预期实现逻辑：

• 当data.leverageSelected为true时，判断data['leverageRate']或data['loanAmount']是否有值（返回布尔结果）
• 当data.leverageSelected为false时，直接判定为true
• 满足条件时执行第10行返回false，否则执行第12行返回true

原代码：

if (
  (data.leverageSelected ? data['leverageRate'] || data['loanAmount'] : true)
) {
  return false  // ---line 10
} else {
  return true // ----line 12
}

问题现象 #

即使给data['leverageRate']或data['loanAmount']赋值，程序始终走到第12行返回true，不符合预期。

核心原因：JavaScript的||和&&运算符返回的是操作数本身，而非布尔值。例如：

const a = 4
const b = 2

console.log(a && b) // 输出2
console.log(a || b) // 输出4

如果赋值的是0这类falsy数字，data['leverageRate'] || data['loanAmount']会返回0，if(0)会被判定为false，从而进入else分支返回true。

修复方案 #

方案1：转换为布尔值（使用!!） #

通过双重非运算符!!将表达式结果转为纯布尔值：

if (
  (data.leverageSelected ? !! (data['leverageRate'] || data['loanAmount']) : true)
) {
  return false
} else {
  return true
}

方案2：转换为布尔值（使用Boolean()） #

使用Boolean()函数显式转换：

if (
  (data.leverageSelected ? Boolean(data['leverageRate'] || data['loanAmount']) : true)
) {
  return false
} else {
  return true
}

方案3：明确判断有效值（适配0为合法值的场景） #

如果业务中0是有效的数值（比如杠杆率为0或贷款额为0是允许的），需要明确判断是否为undefined或null，避免误判：

const hasValidData = 
  (data['leverageRate'] !== undefined && data['leverageRate'] !== null) 
  || (data['loanAmount'] !== undefined && data['loanAmount'] !== null);

const condition = data.leverageSelected ? hasValidData : true;

if (condition) {
  return false;
} else {
  return true;
}

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