React中使用Formik和UUID生成唯一标识符的实践

在React应用中，表单处理是一个常见的需求。通过使用Formik库，我们可以简化表单状态管理和验证过程。但有时，我们需要在提交表单时自动生成一个唯一的标识符（如UUID）来确保数据的唯一性。本文将结合实际代码示例，探讨如何在React中使用Formik和UUID来实现这一功能。

初始化Formik表单

首先，我们需要在React组件中初始化一个Formik表单。以下是一个基本的表单结构：

importReact,{useState,useEffect}from'react';import{useFormik}from'formik';import*asYupfrom'yup';import{v4asuuid}from'uuid';constFormikYupAddBook=()=>{const[valueArray,setValueArray]=useState(getDataFromLs());const[id,setId]=useState('');useEffect(()=>{localStorage.setItem('valueArray',JSON.stringify(valueArray));},[valueArray]);constformik=useFormik({initialValues:{bookId:"",bookName:"",autherName:"",},validationSchema:Yup.object({bookName:Yup.string().required("请输入书名").min(3,"书名不得少于3个字符"),autherName:Yup.string().required("请输入作者名").min(4,"作者名不得少于4个字符").max(10,"作者名不得超过10个字符"),}),onSubmit:(values)=>{constid=uuid();// 在提交时生成UUIDconstupdatedValues={...values,bookId:id};setValueArray(prev=>[...prev,updatedValues]);formik.resetForm();}});// 表单组件代码...}

自动生成UUID

在onSubmit回调函数中，我们通过uuid()函数生成一个新的UUID，并将其与用户输入的其他数据合并到一个新的对象中。这个过程确保了每个提交的表单数据都有一个独一无二的标识符：

onSubmit:(values)=>{constid=uuid();// 生成UUIDconstupdatedValues={...values,bookId:id};setValueArray(prev=>[...prev,updatedValues]);formik.resetForm();// 重置表单以便下次使用}

保存数据到本地存储

为了确保数据的持久化，我们使用了localStorage将数据保存到浏览器的本地存储中：

useEffect(()=>{localStorage.setItem('valueArray',JSON.stringify(valueArray));},[valueArray]);

显示数据

最后，我们可以将这些数据显示在一个表格中，以供用户查看已添加的书籍：

<Table striped bordered hover> <thead> <tr> <th>#</th> <th>书名</th> <th>作者</th> </tr> </thead> <tbody> {valueArray.map((book) => ( <tr key={book.bookId}> <td>{book.bookId}</td> <td>{book.bookName}</td> <td>{book.autherName}</td> </tr> ))} </tbody> </Table>

通过上述方法，我们不仅实现了表单的提交和验证，还通过自动生成UUID来确保每个书籍记录的唯一性。这种方式不仅增强了数据的可管理性，还为后续的扩展提供了基础，如数据的查找、更新和删除操作。

希望这篇博文能为你使用Formik处理React表单提供一些有用的实践思路和具体实现方法。