react 如何判断空

判断对象或数组是否为空

在React中判断对象或数组是否为空，可以使用以下方法：

对象判空

const isEmptyObject = (obj) => {
  return Object.keys(obj).length === 0;
};

数组判空

const isEmptyArray = (arr) => {
  return arr.length === 0;
};

检查null或undefined

对于基本值的空值检查：

const isNullOrUndefined = (value) => {
  return value === null || value === undefined;
};

综合空值检查

可以创建一个通用的空值检查函数：

const isEmpty = (value) => {
  if (value === null || value === undefined) return true;
  if (typeof value === 'object') return Object.keys(value).length === 0;
  if (Array.isArray(value)) return value.length === 0;
  if (typeof value === 'string') return value.trim() === '';
  return false;
};

React组件中的使用示例

function MyComponent({ data }) {
  if (isEmpty(data)) {
    return <div>数据为空</div>;
  }

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
}

使用第三方库

也可以使用lodash的isEmpty方法：

import _ from 'lodash';

if (_.isEmpty(value)) {
  // 处理空值情况
}

TypeScript中的类型安全检查

在TypeScript中，可以使用类型守卫：

function isNotEmpty<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}