Mohamed Ramzi2 نشر 3 مارس أرسل تقرير نشر 3 مارس اريد تعلم jsx قمت ببعض الخطوات والان لدي مشكلة عدم استجابة عند ارسال الطلب في الواجهة الامامية import CommonForm from "@/components/common/form"; import { registerForm } from "@/config"; import { registerUser } from "@/srore/auth-slice"; import { useState } from "react"; import { useDispatch } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; const initialState = { name: "", email: "", password: "", }; function AuthRegister() { const [formData, setFormData] = useState(initialState); const Navigate = useNavigate() const dispatch = useDispatch() function onSubmit(event){ event.preventDefault() dispatch(registerUser(formData)).then(() => Navigate("/auth/login")); } return ( <div className="mx-auto w-full max-w-md space-y-6"> <div className="text-center"> <h1 className="text-3xl font-bold tracking-tight text-foreground"> Create new account </h1> <p className="mt-2"> Already have an account <Link className="font-medium ml-2 text-primary hover:underline" to="/auth/login"> Login </Link> </p> </div> <CommonForm formControls={registerForm} buttonText={"Sign Up"} formData={formData} setFormData={setFormData} onSubmit={onSubmit} /> </div> ); } export default AuthRegister; import {createAsyncThunk, createSlice} from "@reduxjs/toolkit"; import axios from "axios"; //معلومات المستخدم const initialState = { isAuthenticated: false, isLoading: true, user: null, }; export const registerUser = createAsyncThunk( "/register", async (formData) => { const response = await axios.post( "http://localhost:3000/register", formData, { withCredentials: true, } ); return response.data; } ); const authSlice = createSlice({ name:"auth", initialState, reducers: { setUser: (state, action) => {}, }, extraReducers:(builder) =>{ builder .addCase(registerUser.pending, (state) => { state.isLoading = true; }) .addCase(registerUser.fulfilled, (state, action) => { state.isLoading = false; state.user = null; state.isAuthenticated = false; }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false; state.user = null; state.isAuthenticated = false; }) } }) export const { setUser } = authSlice.actions; export default authSlice.reducer; frontendjsx.zip backend.zip 1 اقتباس
0 Mustafa Suleiman نشر أمس الساعة 12:36 أرسل تقرير نشر أمس الساعة 12:36 في ملف src\components\common\form.jsx في الواجهة الأمامية كتبت onSubmit بشكل غير صحيح، في المكون، يجب كتابته onSubmit عند عمل props destructuring هنا: function CommonForm({ formControls, formData, setFormData, onSubmit, buttonText, isBtnDisabled }) وعند تمريره هنا: <form onSubmit={onSubmit}> بعد ذلك سيظهر لك خطأ آخر بسبب أنك في الواجهة الخلفية في ملف controller\userController.js تتحقق من من حقل configPassword وهو غير موجود في الواجهة الأمامية: if (findEmail === null && password === configPassword) { لذا عليك تعديل دالة register في ذلك الملف إلى التالي: exports.register = async (req, res) => { const { name, email, password } = req.body; try { const hashPassword = await bcrypt.hash(password, 10); const findEmail = await User.findOne({ where: { email } }); if (!findEmail) { const user = await User.create({ name, email, password: hashPassword, configPassword: hashPassword, role: 'user', }); res.status(200).json({ message: 'تم انشاء الحساب بنجاح' }); } else { res.status(401).json({ message: 'الحساب موجود بالفعل ' }); } } catch (e) { res.status(500).json(e.message); } }; اقتباس
السؤال
Mohamed Ramzi2
اريد تعلم jsx قمت ببعض الخطوات والان لدي مشكلة عدم استجابة عند ارسال الطلب في الواجهة الامامية
frontendjsx.zip backend.zip
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.