react的非空校验

React中的非空校验通常是在组件的状态(state)、属性(props)或用户输入处理时进行的一种验证手段，目的是确保数据的完整性。在React应用中，可以采用以下几种方法实现：

1. **函数式组件：** 可以在组件内部对props或state进行条件判断。例如，你可以创建一个自定义hook，如`useRequiredProps`，检查某个prop是否为空：

import React from 'react';

function useRequiredProps(props, propToCheck) {
  const isPropNull = props[propToCheck] === null || props[propToCheck] === undefined;
  if (isPropNull) {
    throw new Error(`Property ${propToCheck} cannot be empty`);
  }
  return props;
}

function MyComponent({ myProp }) {
  const validatedProps = useRequiredProps(myProp, 'myProp');
  // 使用validatedProps
}

2. **类组件：** 类组件中可以使用生命周期方法如`getDerivedStateFromProps`来检查，并在状态更新前返回错误：

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.myProp === null || nextProps.myProp === undefined) {
      return { error: 'myProp cannot be empty' };
    }
    return null; // 或者直接返回prevState if no changes needed
  }

  render() {
    const { error } = this.state;
    if (error) {
      // 显示错误信息或者渲染占位UI
      return <div>{error.message}</div>;
    }
    // 正常渲染组件
    return <div>...</div>;
  }
}

3. **Formik或Yup等库：** 如果你在使用前端表单库，如Formik，可以结合像Yup这样的验证库来处理复杂的数据验证，包括空值检查。