ReactJS中如何通过JSON Schema验证API返回的JSON对象？

其实你完全不需要找专门的React插件来做这个——市面上有很多成熟的通用JSON Schema验证库，它们都是纯JS实现，能无缝集成到React应用里，足够满足你的需求。下面是几个最常用的方案和具体的使用示例：

推荐方案1：AJV（Another JSON Schema Validator） #

这是目前最流行、性能顶尖的JSON Schema验证库，支持最新的JSON Schema标准（draft-07、draft-2019-09等），错误提示也非常详细。

首先安装依赖：

npm install ajv
# 或者用yarn
yarn add ajv

然后在React组件中集成使用：

import { useEffect, useState } from 'react';
import Ajv from 'ajv';

// 你的合法JSON Schema
const userSchema = {
  type: 'object',
  properties: {
    id: { type: 'integer' },
    name: { type: 'string' },
    email: { type: 'string', format: 'email' }
  },
  required: ['id', 'name', 'email']
};

function UserProfile() {
  const [userData, setUserData] = useState(null);
  const [validationError, setValidationError] = useState(null);

  useEffect(() => {
    // 请求API数据
    fetch('/api/user-profile')
      .then(res => res.json())
      .then(rawData => {
        // 初始化AJV并编译Schema
        const ajv = new Ajv();
        const validate = ajv.compile(userSchema);
        const isValid = validate(rawData);

        if (isValid) {
          // 验证通过，处理数据
          setUserData(rawData);
          setValidationError(null);
        } else {
          // 验证失败，捕获错误信息
          setValidationError(validate.errors);
          console.error('JSON结构不匹配:', validate.errors);
        }
      })
      .catch(err => console.error('API请求失败:', err));
  }, []);

  // 根据状态渲染不同内容
  if (validationError) {
    return (
      <div className="error-message">
        数据格式错误：
        <ul>
          {validationError.map((err, idx) => (
            <li key={idx}>{err.message}（字段：{err.instancePath}）</li>
          ))}
        </ul>
      </div>
    );
  }

  if (!userData) {
    return <div>加载中...</div>;
  }

  return (
    <div className="user-profile">
      <h2>{userData.name}的个人信息</h2>
      <p>用户ID：{userData.id}</p>
      <p>邮箱：{userData.email}</p>
    </div>
  );
}

export default UserProfile;

推荐方案2：jsonschema #

如果你需要更轻量、API更简洁的库，jsonschema是个不错的选择，适合简单的验证场景。

安装依赖：

npm install jsonschema
# 或者用yarn
yarn add jsonschema

组件中使用示例：

import { useEffect, useState } from 'react';
import { validate } from 'jsonschema';

// 复用之前的userSchema
const userSchema = {
  type: 'object',
  properties: {
    id: { type: 'integer' },
    name: { type: 'string' },
    email: { type: 'string', format: 'email' }
  },
  required: ['id', 'name', 'email']
};

function UserProfile() {
  const [userData, setUserData] = useState(null);
  const [validationError, setValidationError] = useState(null);

  useEffect(() => {
    fetch('/api/user-profile')
      .then(res => res.json())
      .then(rawData => {
        const validationResult = validate(rawData, userSchema);
        if (validationResult.valid) {
          setUserData(rawData);
          setValidationError(null);
        } else {
          setValidationError(validationResult.errors);
          console.error('验证失败:', validationResult.errors);
        }
      })
      .catch(err => console.error('请求出错:', err));
  }, []);

  // 渲染逻辑和之前类似，这里省略...
}

进阶：封装自定义Hook复用验证逻辑 #

如果多个组件都需要验证数据，你可以把验证逻辑封装成自定义Hook，让代码更简洁：

import { useCallback } from 'react';
import Ajv from 'ajv';

// 全局初始化AJV实例，避免重复创建
const ajvInstance = new Ajv();

export function useJsonValidator(schema) {
  const validateData = useCallback((data) => {
    const validateFn = ajvInstance.compile(schema);
    const isValid = validateFn(data);
    return {
      isValid,
      errors: validateFn.errors || null
    };
  }, [schema]);

  return validateData;
}

// 在组件中使用这个Hook：
function UserProfile() {
  const validateUser = useJsonValidator(userSchema);
  
  useEffect(() => {
    fetch('/api/user-profile')
      .then(res => res.json())
      .then(rawData => {
        const { isValid, errors } = validateUser(rawData);
        if (isValid) {
          setUserData(rawData);
        } else {
          setValidationError(errors);
        }
      });
  }, [validateUser]);
  
  // ...渲染逻辑
}

总的来说，这些通用库比专门的React插件更灵活，而且社区维护更活跃，完全能覆盖你验证API返回JSON结构的需求。

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