React中如何同时检测状态变量是否为null、undefined或空值？

你的代码报错核心是逻辑运算符优先级问题：||的优先级高于&&，导致当fleetOwner为null/undefined时，代码依然会尝试访问fleetOwner.id，从而抛出类型错误。下面是几种能同时检测null、undefined、空值的有效写法：

方案1：修正逻辑顺序，先确保对象有效 #

用括号明确先判断fleetOwner是否存在，再检查id的状态：

const [fleetOwner, setFleetOwner] = useState({id:'', name: ''});

// 正确的逻辑判断
if (!!fleetOwner && (fleetOwner.id === undefined || fleetOwner.id === '')) {
  // 执行你的业务逻辑
}

或者利用JS的假值特性简化（空字符串、null、undefined都属于假值）：

if (!fleetOwner || !fleetOwner.id) {
  // 覆盖场景：fleetOwner是null/undefined，或fleetOwner.id为空字符串/undefined
}

方案2：使用可选链运算符（推荐） #

ES2020引入的可选链?.会自动判断对象是否存在，不存在时直接返回undefined，避免报错：

if (!fleetOwner?.id) {
  // 同时覆盖：
  // 1. fleetOwner为null/undefined的情况（fleetOwner?.id返回undefined，!undefined为true）
  // 2. fleetOwner.id为空字符串/undefined的情况（!''和!undefined都为true）
}

方案3：封装通用检测函数 #

如果需要多处复用这类检测逻辑，可以封装工具函数：

// 检测值是否为null、undefined或空字符串
function isEmpty(value) {
  return value === null || value === undefined || value === '';
}

// 使用示例
if (isEmpty(fleetOwner) || isEmpty(fleetOwner?.id)) {
  // 执行逻辑
}

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