react 如何判断空

判断空值的常见方法

在React中判断变量或状态是否为空，可以通过以下方法实现：

检查null或undefined

if (value === null || value === undefined) {
  // 处理空值情况
}

使用可选链操作符（Optional Chaining）

const nestedValue = obj?.prop?.nestedProp;

空值合并运算符（Nullish Coalescing）

const displayValue = value ?? '默认值';

判断空数组或空对象

检查空数组

if (Array.isArray(arr) && arr.length === 0) {
  // 处理空数组
}

检查空对象

if (Object.keys(obj).length === 0) {
  // 处理空对象
}

表单输入空值判断

处理输入框空值

const handleInput = (e) => {
  const inputValue = e.target.value.trim();
  if (!inputValue) {
    // 处理空输入
  }
};

组件中的空值处理

条件渲染

function MyComponent({ data }) {
  return (
    <div>
      {data ? <DisplayData data={data} /> : <EmptyState />}
    </div>
  );
}

默认属性值

MyComponent.defaultProps = {
  data: []
};

这些方法可以根据具体场景选择使用，确保在React应用中正确处理各种空值情况。