إضافة رسالة خطأ بواسطة redux-toolkit

هذا ملف المشروع الخاص بك بعد التعديل :

import React, { useState, useId } from "react";
import { useDispatch, useSelector } from 'react-redux'
import { Link } from "react-router-dom";
// import axios from 'axios'
import { v4 as uuid } from 'uuid';
import { alertActions } from '../../redux/slices/alertSlice'

function Register() {
	const dispatch = useDispatch()
	const alerts = useSelector(store => store.alert.alerts)
	console.log(alerts);

	const [formData, setFormData] = useState({
		name: '',
		email: '',
		password: '',
		password2: ''
	});

	const { name, email, password, password2 } = formData

	const onChange = (e) => {
		setFormData({ ...formData, [e.target.name]: e.target.value })
	}

	const onSubmit = async e => {
		e.preventDefault()
		let errors = [];
		if (password.length < 6) {
			errors.push({
				id: uuid(),
				type: "error",
				msg: "Passwords must be more than 6 characters"
			})
		}
		if (password !== password2) {
			errors.push({
				id: uuid(),
				type: "error",
				msg: "Passwords does not mutch"
			})
		}
		if (errors.length) {
			return dispatch(alertActions.setAlerts(errors))

		}
		console.log("success")
	}

	return (
		<section className="container">
			<h1 className="large text-primary">Sign Up</h1>
			<p className="lead">
				<i className="fas fa-user"></i> Create Your Account
			</p>
			<form
				className="form"
				onSubmit={e => onSubmit(e)}
			>
				<div className="form-group">
					<input
						type="text"
						placeholder="Name"
						name="name"
						value={name}
						onChange={e => onChange(e)}
						required
					/>
				</div>
				<div className="form-group">
					<input
						type="email"
						placeholder="Email Address"
						name="email"
						value={email}
						onChange={e => onChange(e)}
					/>
					<small className="form-text">
						This site uses Gravatar so if you want a profile image, use a
						Gravatar email
					</small>
				</div>
				<div className="form-group">
					<input
						type="password"
						placeholder="Password"
						name="password"
						value={password}
						onChange={e => onChange(e)}
					// minLength="6"
					/>
				</div>
				<div className="form-group">
					<input
						type="password"
						placeholder="Confirm Password"
						name="password2"
						value={password2}
						onChange={e => onChange(e)}
						minLength="6"
					/>
				</div>
				<input
					type="submit"
					className="btn btn-primary"
					value="Register"
				/>
			</form>
			<p className="my-1">
				Already have an account? <Link to="/login">Sign In</Link>
			</p>
		</section>
	);
}

export default Register;

يمكنك الاطلاع على التعديلات التي اجريتها

1- واهما هو استخدام المكتبة uuid بدلاً من uuidv4 :

npm uninstall uuidv4
npm install uuid

و كود الاستدعاء يصبح بالشكل :

import { v4 as uuid } from 'uuid';

2- وتعديل نظام اضافة الاخطاء.

وما انصحك به هو التخلي عن هذا الاسلوب واستخدام react-hot-toast و react-hook-form وهذه المكاتب هي التي استخدمها انا شخصياً من اجل التعامل مع النماذج وهي افضل بكثير واسرع واكثر قابلية للتحكم من ان تبني المنطق بنفسك.

انا بحاجة لكامل ملفات المشروع حتى استطيع مساعدتك، أو ان كان بإمكانك شرح المنطق الذي تريده بالتفصيل فيمكنني تقديم مثال يقوم بتنفيذ المنطق الذي تريده.

بتاريخ 1 دقيقة مضت قال عمر قره محمد:

انا بحاجة لكامل ملفات المشروع حتى استطيع مساعدتك، أو ان كان بإمكانك شرح المنطق الذي تريده بالتفصيل فيمكنني تقديم مثال يقوم بتنفيذ المنطق الذي تريده.

تفضل ملفات المشروع

hsoub.zip

بتاريخ 6 دقائق مضت قال عمر قره محمد:

وما انصحك به هو التخلي عن هذا الاسلوب واستخدام react-hot-toast و react-hook-form وهذه المكاتب هي التي استخدمها انا شخصياً من اجل التعامل مع النماذج وهي افضل بكثير واسرع واكثر قابلية للتحكم من ان تبني المنطق بنفسك.

شكرا لك، 

في العادة أستعمل react-toastify لكن أردت تجربة كود بنفسي دون الحاجة لمكتبات أخرى