ರಿಯಾಕ್ಟ್ ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಶಕ್ತಿಯುತ, ಪ್ರಗತಿಪರ ವ್ಯಾಲಿಡೇಶನ್ ಅನ್‌ಲಾಕ್ ಮಾಡಿ. ತಡೆರಹಿತ, ಸರ್ವರ್-ಸಂಯೋಜಿತ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ useFormState ಹುಕ್ ಅನ್ನು ಬಳಸಲು ಕಲಿಯಿರಿ.
ರಿಯಾಕ್ಟ್ useFormState ವ್ಯಾಲಿಡೇಶನ್ ಎಂಜಿನ್: ಬಹು-ಹಂತದ ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಶನ್ ಕುರಿತು ಒಂದು ಆಳವಾದ ನೋಟ
ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ದೃಢವಾದ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ ಪ್ರಾಥಮಿಕ ದ್ವಾರವಾದ ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಇದು ಅತ್ಯಂತ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್‌ಗಳು ನೇರವಾಗಿದ್ದರೂ, ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣತೆ ಹೆಚ್ಚಾಗುತ್ತದೆ—ಬಳಕೆದಾರರ ನೋಂದಣಿ ವಿಝಾರ್ಡ್‌ಗಳು, ಇ-ಕಾಮರ್ಸ್ ಚೆಕ್‌ಔಟ್‌ಗಳು, ಅಥವಾ ವಿವರವಾದ ಕಾನ್ಫಿಗರೇಶನ್ ಪ್ಯಾನೆಲ್‌ಗಳನ್ನು ಯೋಚಿಸಿ. ಈ ಬಹು-ಹಂತದ ಪ್ರಕ್ರಿಯೆಗಳು ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ, ವ್ಯಾಲಿಡೇಶನ್, ಮತ್ತು ತಡೆರಹಿತ ಬಳಕೆದಾರ ಹರಿವನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಗಮನಾರ್ಹ ಸವಾಲುಗಳನ್ನು ಒಡ್ಡುತ್ತವೆ. ಐತಿಹಾಸಿಕವಾಗಿ, ಡೆವಲಪರ್‌ಗಳು ಈ ಸಂಕೀರ್ಣತೆಯನ್ನು ನಿಭಾಯಿಸಲು ಸಂಕೀರ್ಣ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್, ಕಾಂಟೆಕ್ಸ್ಟ್ ಪ್ರೊವೈಡರ್‌ಗಳು, ಮತ್ತು ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಹೆಣಗಾಡಿದ್ದಾರೆ.
ರಿಯಾಕ್ಟ್‌ನ `useFormState` ಹುಕ್ ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ. ರಿಯಾಕ್ಟ್‌ನ ಸರ್ವರ್-ಸಂಯೋಜಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ವಿಕಾಸದ ಭಾಗವಾಗಿ ಪರಿಚಯಿಸಲಾದ ಈ ಶಕ್ತಿಯುತ ಹುಕ್, ವಿಶೇಷವಾಗಿ ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಮತ್ತು ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಸರಳೀಕೃತ, ಸುಂದರವಾದ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ನೇರವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುವ ಮೂಲಕ, `useFormState` ಒಂದು ದೃಢವಾದ ವ್ಯಾಲಿಡೇಶನ್ ಎಂಜಿನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ, ಮತ್ತು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಈ ಲೇಖನವು `useFormState` ಅನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದು ಅತ್ಯಾಧುನಿಕ ಬಹು-ಹಂತದ ವ್ಯಾಲಿಡೇಶನ್ ಎಂಜಿನ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ವಿಶ್ವದಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಸಂಕೀರ್ಣ ಕಾರ್ಯವನ್ನು ನಿರ್ವಹಣಾযোগ্য ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ಪ್ರಕ್ರಿಯೆಯಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳ ನಿರಂತರ ಸವಾಲು
ಪರಿಹಾರದ ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, ಡೆವಲಪರ್‌ಗಳು ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ಎದುರಿಸುವ ಸಾಮಾನ್ಯ ನೋವಿನ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಈ ಸವಾಲುಗಳು ಸಣ್ಣವೇನಲ್ಲ ಮತ್ತು ಡೆವಲಪ್‌ಮೆಂಟ್ ಸಮಯದಿಂದ ಹಿಡಿದು ಅಂತಿಮ-ಬಳಕೆದಾರರ ಅನುಭವದವರೆಗೆ ಎಲ್ಲದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆ: ಬಳಕೆದಾರರು ಹಂತಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ನೀವು ಡೇಟಾವನ್ನು ಹೇಗೆ ಉಳಿಸಿಕೊಳ್ಳುತ್ತೀರಿ? ಸ್ಟೇಟ್ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ, ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಲ್ಲಿ, ಅಥವಾ ಲೋಕಲ್ ಸ್ಟೋರೇಜ್‌ನಲ್ಲಿ ಇರಬೇಕೇ? ಪ್ರತಿಯೊಂದು ವಿಧಾನಕ್ಕೂ ತನ್ನದೇ ಆದ ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲತೆಗಳಿವೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಾಪ್-ಡ್ರಿಲ್ಲಿಂಗ್ ಅಥವಾ ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ಸಿಂಕ್ರೊನೈಸೇಶನ್ ಲಾಜಿಕ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ವ್ಯಾಲಿಡೇಶನ್ ಲಾಜಿಕ್‌ನ ವಿಘಟನೆ: ವ್ಯಾಲಿಡೇಶನ್ ಎಲ್ಲಿ ನಡೆಯಬೇಕು? ಕೊನೆಯಲ್ಲಿ ಎಲ್ಲವನ್ನೂ ವ್ಯಾಲಿಡೇಟ್ ಮಾಡುವುದು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ರತಿ ಹಂತದಲ್ಲಿ ವ್ಯಾಲಿಡೇಟ್ ಮಾಡುವುದು ಉತ್ತಮ, ಆದರೆ ಇದಕ್ಕಾಗಿ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ (ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಗಾಗಿ) ಮತ್ತು ಸರ್ವರ್‌ನಲ್ಲಿ (ಭದ್ರತೆ ಮತ್ತು ಡೇಟಾ ಸಮಗ್ರತೆಗಾಗಿ) ವಿಘಟಿತ ವ್ಯಾಲಿಡೇಶನ್ ಲಾಜಿಕ್ ಬರೆಯಬೇಕಾಗುತ್ತದೆ.
- ಬಳಕೆದಾರರ ಅನುಭವದ ಅಡೆತಡೆಗಳು: ಒಬ್ಬ ಬಳಕೆದಾರ ತನ್ನ ಡೇಟಾವನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ ಹಂತಗಳ ನಡುವೆ ಹಿಂದೆ ಮತ್ತು ಮುಂದೆ ಚಲಿಸಲು ನಿರೀಕ್ಷಿಸುತ್ತಾನೆ. ಅವರು ಸ್ಪಷ್ಟ, ಸಂದರ್ಭೋಚಿತ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಮತ್ತು ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸಹ ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ಈ ಸರಾಗವಾದ ಅನುಭವವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಗಮನಾರ್ಹ ಪ್ರಮಾಣದ ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಕೋಡ್ ಬೇಕಾಗಬಹುದು.
- ಸರ್ವರ್-ಕ್ಲೈಂಟ್ ಸ್ಟೇಟ್ ಸಿಂಕ್ರೊನೈಸೇಶನ್: ಸತ್ಯದ ಅಂತಿಮ ಮೂಲ ಸಾಮಾನ್ಯವಾಗಿ ಸರ್ವರ್ ಆಗಿದೆ. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಅನ್ನು ಸರ್ವರ್-ಸೈಡ್ ವ್ಯಾಲಿಡೇಶನ್ ನಿಯಮಗಳು ಮತ್ತು ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡುವುದು ನಿರಂತರ ಹೋರಾಟವಾಗಿದೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಕಲಿ ಕೋಡ್ ಮತ್ತು ಸಂಭಾವ್ಯ ಅಸಂಗತತೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಈ ಸವಾಲುಗಳು ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್ ನಡುವಿನ ಅಂತರವನ್ನು ಕಡಿಮೆ ಮಾಡುವ, ಹೆಚ್ಚು ಸಂಯೋಜಿತ, ಸುಸಂಬದ್ಧ ವಿಧಾನದ ಅಗತ್ಯವನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತವೆ. ಇದೇ ಸ್ಥಳದಲ್ಲಿ `useFormState` ಹೊಳೆಯುತ್ತದೆ.
`useFormState` ಪರಿಚಯ: ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಗೆ ಒಂದು ಆಧುನಿಕ ವಿಧಾನ
`useFormState` ಹುಕ್, ಫಾರ್ಮ್ ಆಕ್ಷನ್‌ನ ಫಲಿತಾಂಶದ ಆಧಾರದ ಮೇಲೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ JavaScript ಸಕ್ರಿಯಗೊಳಿಸಿದ್ದರೂ ಅಥವಾ ಇಲ್ಲದಿದ್ದರೂ ಸಹ, ತಡೆರಹಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪ್ರಗತಿಪರವಾಗಿ ವರ್ಧಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ರಿಯಾಕ್ಟ್‌ನ ದೃಷ್ಟಿಯ ಒಂದು ಮೂಲಾಧಾರವಾಗಿದೆ.
`useFormState` ಎಂದರೇನು?
ಮೂಲಭೂತವಾಗಿ, `useFormState` ಒಂದು ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದ್ದು, ಇದು ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಒಂದು ಸರ್ವರ್ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್ ಮತ್ತು ಒಂದು ಆರಂಭಿಕ ಸ್ಟೇಟ್. ಇದು ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದು ಅರೇಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ: ಫಾರ್ಮ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್ ಮತ್ತು ನಿಮ್ಮ `
);
}
ಹಂತ 1: ವೈಯಕ್ತಿಕ ಮಾಹಿತಿಯನ್ನು ಸೆರೆಹಿಡಿಯುವುದು ಮತ್ತು ವ್ಯಾಲಿಡೇಟ್ ಮಾಡುವುದು
ಈ ಹಂತದಲ್ಲಿ, ನಾವು ಕೇವಲ `name` ಮತ್ತು `email` ಫೀಲ್ಡ್‌ಗಳನ್ನು ಮಾತ್ರ ವ್ಯಾಲಿಡೇಟ್ ಮಾಡಲು ಬಯಸುತ್ತೇವೆ. ಯಾವ ವ್ಯಾಲಿಡೇಶನ್ ಲಾಜಿಕ್ ಅನ್ನು ಚಲಾಯಿಸಬೇಕೆಂದು ನಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗೆ ತಿಳಿಸಲು ನಾವು ಹಿಡನ್ ಇನ್‌ಪುಟ್ `_step` ಅನ್ನು ಬಳಸುತ್ತೇವೆ.
// Step1.jsx ಕಾಂಪೊನೆಂಟ್
{state.errors.name} {state.errors.email}
export function Step1({ state }) {
return (
ಹಂತ 1: ವೈಯಕ್ತಿಕ ಮಾಹಿತಿ
{state.errors?.name &&
{state.errors?.email &&
);
}
ಈಗ, ಹಂತ 1 ರ ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ನಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡೋಣ.
// actions.js (ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗಿದೆ)
// ... (ಇಂಪೋರ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಕೀಮಾ ವ್ಯಾಖ್ಯಾನ)
export async function onbordingAction(prevState, formData) {
// ... (ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಪಡೆಯಿರಿ)
const step = Number(formData.get('_step'));
if (step === 1) {
const validatedFields = schema.pick({ name: true, email: true }).safeParse({ name, email });
if (!validatedFields.success) {
return {
...currentState,
step: 1,
errors: validatedFields.error.flatten().fieldErrors,
};
}
// ಯಶಸ್ವಿಯಾಗಿದೆ, ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗಿ
return {
...currentState,
step: 2,
errors: {},
};
}
// ... (ಇತರ ಹಂತಗಳಿಗಾಗಿ ಲಾಜಿಕ್)
}
ಬಳಕೆದಾರರು "ಮುಂದೆ" ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಫಾರ್ಮ್ ಸಲ್ಲಿಸಲಾಗುತ್ತದೆ. ಸರ್ವರ್ ಆಕ್ಷನ್ ಅದು ಹಂತ 1 ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ, Zod ನ `pick` ಮೆಥಡ್ ಬಳಸಿ ಕೇವಲ `name` ಮತ್ತು `email` ಫೀಲ್ಡ್‌ಗಳನ್ನು ವ್ಯಾಲಿಡೇಟ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಹೊಸ ಸ್ಟೇಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ವ್ಯಾಲಿಡೇಶನ್ ವಿಫಲವಾದರೆ, ಅದು ದೋಷಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಮತ್ತು ಹಂತ 1 ರಲ್ಲಿ ಉಳಿಯುತ್ತದೆ. ಯಶಸ್ವಿಯಾದರೆ, ಅದು ದೋಷಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ ಮತ್ತು `step` ಅನ್ನು 2 ಕ್ಕೆ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ನಮ್ಮ ಮುಖ್ಯ `OnboardingForm` ಕಾಂಪೊನೆಂಟ್ `Step2` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
ಹಂತ 2: ಕಂಪನಿ ವಿವರಗಳಿಗಾಗಿ ಪ್ರಗತಿಪರ ವ್ಯಾಲಿಡೇಶನ್
ಈ ವಿಧಾನದ ಸೌಂದರ್ಯವೆಂದರೆ ಹಂತ 1 ರಿಂದ ಸ್ಟೇಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಾಗಿಸಲ್ಪಡುತ್ತದೆ. ನಾವು ಅದನ್ನು ಹಿಡನ್ ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಬೇಕಷ್ಟೆ, ಇದರಿಂದ ಅದು ಮುಂದಿನ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯಲ್ಲಿ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ.
// Step2.jsx ಕಾಂಪೊನೆಂಟ್
{state.errors.companyName} {state.errors.role}
export function Step2({ state }) {
return (
ಹಂತ 2: ಕಂಪನಿ ವಿವರಗಳು
{/* ಹಿಂದಿನ ಹಂತದ ಡೇಟಾವನ್ನು ಉಳಿಸಿ */}
{state.errors?.companyName &&
{state.errors?.role &&
);
}
ಮತ್ತು ನಾವು ಹಂತ 2 ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತೇವೆ.
// actions.js (ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗಿದೆ)
// ...
if (step === 2) {
const validatedFields = schema.pick({ companyName: true, role: true }).safeParse({ companyName, role });
if (!validatedFields.success) {
return {
...currentState,
step: 2,
errors: validatedFields.error.flatten().fieldErrors,
};
}
// ಯಶಸ್ವಿಯಾಗಿದೆ, ಅಂತಿಮ ಪರಿಶೀಲನೆಗೆ ಹೋಗಿ
return {
...currentState,
step: 3,
errors: {},
};
}
// ...
ಲಾಜಿಕ್ ಹಂತ 1 ರಂತೆಯೇ ಇದೆ, ಆದರೆ ಇದು ಹಂತ 2 ರ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಗುರಿ ಮಾಡುತ್ತದೆ. `useFormState` ಹುಕ್ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಸಂರಕ್ಷಿಸಿ, ಸ್ವಚ್ಛ, ಪ್ರಗತಿಪರ ವ್ಯಾಲಿಡೇಶನ್ ಹರಿವನ್ನು ಒದಗಿಸುತ್ತಾ, ಪರಿವರ್ತನೆಯನ್ನು ತಡೆರಹಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
ಹಂತ 3: ಅಂತಿಮ ಪರಿಶೀಲನೆ ಮತ್ತು ಸಲ್ಲಿಕೆ
ಅಂತಿಮ ಹಂತದಲ್ಲಿ, ಬಳಕೆದಾರರು ಪರಿಶೀಲಿಸಲು ನಾವು ಸಂಗ್ರಹಿಸಿದ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ. ಅಂತಿಮ ಸಲ್ಲಿಕೆಯು ಡೇಟಾವನ್ನು ಡೇಟಾಬೇಸ್‌ಗೆ ಕಮಿಟ್ ಮಾಡುವ ಮೊದಲು ಎಲ್ಲಾ ಫೀಲ್ಡ್‌ಗಳ ಸಮಗ್ರ ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
// Step3.jsx ಕಾಂಪೊನೆಂಟ್
{state.message} {state.message}
export function Step3({ state }) {
return (
ಹಂತ 3: ವಿವರಗಳನ್ನು ದೃಢೀಕರಿಸಿ
{state.message && state.message.startsWith('ಯಶಸ್ಸು') &&
{state.message && state.message.startsWith('ದೋಷ') &&
);
}
ಅಂತಿಮ ಸರ್ವರ್ ಆಕ್ಷನ್ ಲಾಜಿಕ್ ಪೂರ್ಣ ವ್ಯಾಲಿಡೇಶನ್ ಮತ್ತು ಅಂತಿಮ ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
// actions.js (ಅಂತಿಮ ಆವೃತ್ತಿ)
// ...
if (step === 3) {
// ಅಂತಿಮ, ಪೂರ್ಣ ವ್ಯಾಲಿಡೇಶನ್
const validatedFields = schema.safeParse({ name, email, companyName, role });
if (!validatedFields.success) {
// ಹಂತ-ಹಂತದ ವ್ಯಾಲಿಡೇಶನ್ ಸರಿಯಾಗಿದ್ದರೆ ಇದು ಸಂಭವಿಸಬಾರದು, ಆದರೆ ಉತ್ತಮ ಸುರಕ್ಷತಾ ಕ್ರಮ
return {
...currentState,
step: 1, // ಬಳಕೆದಾರರನ್ನು ದೋಷಗಳೊಂದಿಗೆ ಮೊದಲ ಹಂತಕ್ಕೆ ಹಿಂತಿರುಗಿ ಕಳುಹಿಸಿ
errors: validatedFields.error.flatten().fieldErrors,
message: 'ದೋಷ: ಅಮಾನ್ಯ ಡೇಟಾ ಕಂಡುಬಂದಿದೆ. ದಯವಿಟ್ಟು ಪರಿಶೀಲಿಸಿ.'
};
}
try {
// console.log('ಡೇಟಾಬೇಸ್‌ಗೆ ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ:', validatedFields.data);
// await saveToDatabase(validatedFields.data);
return { message: 'ಯಶಸ್ಸು! ನಿಮ್ಮ ಆನ್‌ಬೋರ್ಡಿಂಗ್ ಪೂರ್ಣಗೊಂಡಿದೆ.', step: 4 }; // ಅಂತಿಮ ಯಶಸ್ಸಿನ ಹಂತ
} catch (dbError) {
return { ...currentState, step: 3, message: 'ದೋಷ: ಡೇಟಾ ಉಳಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ.' };
}
}
// ...
ಇದರೊಂದಿಗೆ, ನಾವು `useFormState` ಹುಕ್‌ನಿಂದ ಸ್ವಚ್ಛವಾಗಿ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟ, ಪ್ರಗತಿಪರ, ಸರ್ವರ್-ಅಧಿಕೃತ ವ್ಯಾಲಿಡೇಶನ್‌ನೊಂದಿಗೆ ಒಂದು ಸಂಪೂರ್ಣ, ದೃಢವಾದ, ಬಹು-ಹಂತದ ಫಾರ್ಮ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ.
ವಿಶ್ವ ದರ್ಜೆಯ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಒಂದು ಕಾರ್ಯಸಾಧ್ಯವಾದ ಫಾರ್ಮ್ ಅನ್ನು ನಿರ್ಮಿಸುವುದು ಒಂದು ವಿಷಯ; ಅದನ್ನು ಬಳಸಲು ಆನಂದದಾಯಕವಾಗಿಸುವುದು ಇನ್ನೊಂದು. ನಿಮ್ಮ ಬಹು-ಹಂತದ ಫಾರ್ಮ್‌ಗಳನ್ನು ಉನ್ನತೀಕರಿಸಲು ಇಲ್ಲಿ ಕೆಲವು ಸುಧಾರಿತ ತಂತ್ರಗಳಿವೆ.
ನ್ಯಾವಿಗೇಷನ್ ನಿರ್ವಹಣೆ: ಹಿಂದೆ ಮತ್ತು ಮುಂದೆ ಚಲಿಸುವುದು
ನಮ್ಮ ಪ್ರಸ್ತುತ ಲಾಜಿಕ್ ಕೇವಲ ಮುಂದೆ ಚಲಿಸುತ್ತದೆ. ಬಳಕೆದಾರರಿಗೆ ಹಿಂತಿರುಗಲು ಅನುವು ಮಾಡಿಕೊಡಲು, ನಾವು ಸರಳ `type="submit"` ಬಟನ್ ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ನಾವು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್‌ನಲ್ಲಿ ಹಂತವನ್ನು ನಿರ್ವಹಿಸುತ್ತೇವೆ ಮತ್ತು ಫಾರ್ಮ್ ಆಕ್ಷನ್ ಅನ್ನು ಕೇವಲ ಮುಂದಕ್ಕೆ ಚಲಿಸಲು ಮಾತ್ರ ಬಳಸುತ್ತೇವೆ. ಆದಾಗ್ಯೂ, ಸರ್ವರ್-ಕೇಂದ್ರಿತ ಮಾದರಿಯೊಂದಿಗೆ ಅಂಟಿಕೊಳ್ಳುವ ಒಂದು ಸರಳ ವಿಧಾನವೆಂದರೆ, "ಹಿಂದೆ" ಬಟನ್ ಅನ್ನು ಹೊಂದಿರುವುದು, ಅದು ಕೂಡ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸುತ್ತದೆ ಆದರೆ ವಿಭಿನ್ನ ಉದ್ದೇಶದೊಂದಿಗೆ.
// ಒಂದು ಹಂತದ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ...
// ಸರ್ವರ್ ಆಕ್ಷನ್‌ನಲ್ಲಿ...
const intent = formData.get('intent');
if (intent === 'back') {
return { ...currentState, step: step - 1, errors: {} };
}
`useFormStatus` ನೊಂದಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುವುದು
`useFormStatus` ಹುಕ್ ಅದೇ `