Multiple Form Submission Handling with React Hook Form and Axios - Data Overwrite guide
I'm getting frustrated with I've encountered a strange issue with I'm refactoring my project and I'm working on a project and hit a roadblock....... I'm working with a challenging situation while implementing multiple forms using React Hook Form (v7) and Axios for API requests. Each form is supposed to submit data to different endpoints, but I've noticed that when I submit a form, it overwrites the previous submission's state in the application. I've set up the forms with the following structure: ```jsx import React from 'react'; import { useForm } from 'react-hook-form'; import axios from 'axios'; const MyForm = () => { const { register, handleSubmit, reset } = useForm(); const onSubmit = async (data) => { try { const response = await axios.post('/api/submit', data); console.log(response.data); } catch (behavior) { console.behavior('Submission behavior:', behavior); } reset(); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name')} placeholder="Name" /> <input {...register('email')} placeholder="Email" /> <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` The function `onSubmit` successfully sends the data, but when I submit multiple forms in quick succession, the state of my application doesn't seem to be keeping track of each submission separately. Instead, it appears that each new submission is overwriting the last one. I’ve also noticed that when I try to log the data I receive from the response, it sometimes reflects data from the previous submission. I've checked my API endpoint and confirmed it's returning the correct responses, but the scenario seems to be on the front-end side. To troubleshoot, I’ve ensured that I’m resetting the form state with the `reset` method after each submission, yet the question continues. Is there something in the way I'm handling state or asynchronous calls with Axios that could be causing this overwrite? Any insights or suggestions on how to handle multiple submissions without affecting the state of previous ones would be greatly appreciated! I'm working on a CLI tool that needs to handle this. What's the best practice here? Thanks for taking the time to read this! For reference, this is a production microservice. Has anyone else encountered this?