react-jsonschema-form与React Query成功状态集成

【免费下载链接】react-jsonschema-form 项目地址: https://gitcode.com/gh_mirrors/rea/react-jsonschema-form

你是否在开发表单应用时遇到过数据提交后状态管理混乱的问题？是否希望表单能够智能地显示加载状态、错误提示和成功反馈？本文将带你一步解决这些痛点，通过将react-jsonschema-form与React Query无缝集成，打造流畅的表单交互体验。读完本文后，你将能够：

• 理解react-jsonschema-form的核心工作原理
• 掌握React Query的成功状态管理技巧
• 实现表单提交、加载状态和成功反馈的完美结合
• 解决实际开发中常见的状态同步问题

为什么需要集成react-jsonschema-form与React Query？

在现代Web应用开发中，表单是用户与系统交互的重要桥梁。react-jsonschema-form作为一个强大的表单生成库，能够通过JSON Schema快速构建复杂表单，而React Query则专注于数据请求和状态管理。将两者结合，可以充分发挥各自优势：

• react-jsonschema-form提供声明式表单定义和验证
• React Query处理异步数据获取、缓存和状态同步
• 两者结合实现表单数据的无缝流转和状态一致性

react-jsonschema-form支持多种UI主题，包括Ant Design、Bootstrap、Chakra UI等，详细可查看支持的主题列表。

核心概念解析

react-jsonschema-form的Form组件

react-jsonschema-form的核心是Form组件，它接受schema、formData和onSubmit等props，自动生成表单并处理验证逻辑。关键代码位于packages/core/src/components/Form.tsx：

export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema> {
  /** The JSON schema object for the form */
  schema: S;
  /** An implementation of the ValidatorType interface */
  validator: ValidatorType<T, S>;
  /** The data for the form */
  formData?: T;
  /** Callback when form is submitted with valid data */
  onSubmit?: (data: IChangeEvent<T, S>, event: FormEvent<any>) => void;
  // 其他props...
}

Form组件的状态管理通过getStateFromProps方法实现，它处理表单数据的初始化、验证和更新：

getStateFromProps(
  props: FormProps<T, S>,
  inputFormData?: T,
  retrievedSchema?: S,
  isSchemaChanged = false
): FormState<T, S> {
  // 处理表单数据和验证逻辑
}

React Query的成功状态管理

React Query通过useMutation hook处理数据提交，提供loading、error和data等状态，完美契合表单提交场景：

const mutation = useMutation(submitData, {
  onSuccess: (data) => {
    // 处理成功状态
  },
});

集成步骤详解

步骤1：安装必要依赖

首先确保项目中安装了react-jsonschema-form和React Query：

npm install @rjsf/core @rjsf/utils react-query

步骤2：创建表单Schema和初始数据

定义表单的JSON Schema和初始数据：

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "姓名" },
    email: { type: "string", title: "邮箱", format: "email" }
  },
  required: ["name", "email"]
};

const initialData = { name: "", email: "" };

步骤3：实现表单提交和状态管理

使用React Query的useMutation处理表单提交，结合react-jsonschema-form的Form组件：

import { Form } from "@rjsf/core";
import { useMutation } from "react-query";
import validator from "@rjsf/validator-ajv8";

function MyForm() {
  const mutation = useMutation(submitFormData, {
    onSuccess: (data) => {
      // 处理成功状态，如显示成功消息或重定向
      alert("提交成功！");
    }
  });

  const onSubmit = ({ formData }) => {
    mutation.mutate(formData);
  };

  return (
    <div>
      <h2>用户信息表单</h2>
      <Form
        schema={schema}
        formData={initialData}
        onSubmit={onSubmit}
        validator={validator}
        disabled={mutation.isLoading}
      />
      
      {/* 加载状态显示 */}
      {mutation.isLoading && <div>提交中...</div>}
      
      {/* 错误状态显示 */}
      {mutation.isError && <div>提交失败: {mutation.error.message}</div>}
    </div>
  );
}

步骤4：处理成功状态和重置表单

在React Query的onSuccess回调中，可以重置表单或执行其他成功逻辑：

const [formData, setFormData] = useState(initialData);

const mutation = useMutation(submitFormData, {
  onSuccess: (data) => {
    alert("提交成功！");
    setFormData(initialData); // 重置表单
  },
});

高级应用：结合UI主题

react-jsonschema-form支持多种UI主题，以Chakra UI为例，首先安装相关依赖：

npm install @rjsf/chakra-ui @chakra-ui/react @emotion/react @emotion/styled framer-motion

然后使用Chakra UI主题的Form组件：

import { Form } from "@rjsf/chakra-ui";
import { ChakraProvider } from "@chakra-ui/react";

function ChakraForm() {
  // ... 其他代码与前面类似
  
  return (
    <ChakraProvider>
      <Form
        schema={schema}
        formData={formData}
        onSubmit={onSubmit}
        validator={validator}
        disabled={mutation.isLoading}
      />
    </ChakraProvider>
  );
}

Chakra UI主题提供了现代化的表单样式和交互，具体组件实现可查看packages/chakra-ui/src/Form/。

常见问题解决

问题1：表单提交后状态不同步

解决方案：使用React Query的isLoading状态控制表单禁用，防止重复提交：

<Form
  onSubmit={onSubmit}
  disabled={mutation.isLoading}
  // 其他props
/>

问题2：复杂表单验证

react-jsonschema-form支持自定义验证函数，可在提交前进行复杂验证：

const customValidate = (formData, errors) => {
  if (formData.age && formData.age < 18) {
    errors.age.addError("必须年满18岁");
  }
  return errors;
};

<Form
  schema={schema}
  customValidate={customValidate}
  // 其他props
/>

问题3：表单数据缓存

利用React Query的缓存功能，可以在组件重新挂载时保留表单数据：

const queryClient = useQueryClient();

// 保存表单数据到缓存
const saveFormData = (data) => {
  queryClient.setQueryData("formData", data);
};

// 从缓存获取表单数据
const { data: savedFormData } = useQuery("formData", () => queryClient.getQueryData("formData") || initialData);

完整示例代码

以下是一个完整的集成示例，结合了react-jsonschema-form和React Query：

import React, { useState } from "react";
import { Form } from "@rjsf/core";
import { useMutation, QueryClient, QueryClientProvider } from "react-query";
import validator from "@rjsf/validator-ajv8";
import { schema } from "./schema";

// 模拟API提交函数
const submitFormData = async (formData) => {
  const response = await fetch("/api/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(formData),
  });
  if (!response.ok) throw new Error("提交失败");
  return response.json();
};

function MyForm() {
  const [formData, setFormData] = useState({ name: "", email: "" });
  const mutation = useMutation(submitFormData, {
    onSuccess: (data) => {
      alert("提交成功！");
      setFormData({ name: "", email: "" }); // 重置表单
    },
  });

  const onSubmit = ({ formData }) => {
    mutation.mutate(formData);
  };

  return (
    <div className="form-container">
      <h2>用户注册表单</h2>
      
      <Form
        schema={schema}
        formData={formData}
        onSubmit={onSubmit}
        validator={validator}
        disabled={mutation.isLoading}
        onChange={({ formData }) => setFormData(formData)}
      />
      
      {mutation.isLoading && <div className="loading">处理中...</div>}
      {mutation.isError && <div className="error">错误: {mutation.error.message}</div>}
      {mutation.isSuccess && <div className="success">提交成功！</div>}
    </div>
  );
}

// 提供React Query上下文
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <MyForm />
      </div>
    </QueryClientProvider>
  );
}

export default App;

总结与展望

通过本文介绍的方法，我们成功实现了react-jsonschema-form与React Query的集成，主要收获包括：

1. 理解了react-jsonschema-form的Form组件核心原理和状态管理
2. 掌握了React Query处理异步提交和状态管理的技巧
3. 实现了表单提交、加载状态、错误处理和成功反馈的完整流程
4. 了解了如何结合不同UI主题和解决常见问题

未来可以进一步探索：

• 复杂表单的分步提交实现
• 文件上传与进度显示
• 表单数据的本地持久化
• 更高级的验证和错误处理策略

希望本文对你的项目开发有所帮助，如果你有任何问题或建议，欢迎在项目仓库提交issue或PR。

项目完整文档

【免费下载链接】react-jsonschema-form 项目地址: https://gitcode.com/gh_mirrors/rea/react-jsonschema-form