محمد الحربي36

قمت بعمل مشروع رياكت جديد عن طريق npx create-react-app وتم إنشائه وهو جديد لم أقم بإضافة أو إزالة أي شئ منه ولكن عندما حاول تشغيله عن طريق كتابة npm run start يظهر لي خطأ كما في الصورة المرفقة

أخي استخدمت هذه الطريقة في البداية ولكنها لم تنجح فقمت بوضع await قبل استدعاء دالة handlevalid ولم تنجح أيضا لقد لاحظت أن span يظهر في الصفحة قبل أن تقوم الـ console.log التي في ملف authActions في السطر 11 بطباعة الـ data وهذا على الأغلب بسبب تأخر جلب البيانات من قاعدة البيانات وبالتالي تقوم الدالة handlevalid بإظهار الـ span بسبب عدم وجود الرمز المميز token لأن التوكن يظهر بعد جلب البينات أخي ملف المشروع قمت بإرفاقه في الأعلى أتمنى منك الإطلاع عليه رجاءا :- هل هناك طريقة أجعل الـ span يتأخر قليلا أو ينتظر جلب البينات مثلا ؟

أخي المشكلة الآن أن الـ span الأحمر الذي من المفترض أن لا يظهر إلا عند عدم وجود التوكن يعمل بالعكس الآن عند وجود التوكن يظهر وعند عدم وجود التوكن لا يظهر هذا آخر كود وصلت إليه import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import "./login.scss"; import axios from "axios"; import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import {login} from "../../redux/actions/authActions.js"; import {useDispatch, useSelector} from "react-redux"; import Alert from "../../components/Alert"; export default function Login() { const initialState = {email:'', password: ''} const [showpass, setShowpass] = useState(false); const [userData, setUserData] = useState(initialState); const [isCorrect, setIsCorrect] = useState(true); const [clicked, setClicked] = useState(false); const auth = useSelector(state => state); const dispatch = useDispatch(); const {email, password} = userData; useEffect(() => { if(clicked){ console.log(auth); handlevalid() } }, [auth]); const handleChange = (e) => { const {name, value} = e.target; setUserData({...userData, [name]:value }) } const handlevalid = async () => { if (!auth.token) {setIsCorrect(false)} }; const handleLogin = async (e) => { e.preventDefault(); setUserData({email, password }) dispatch(login(userData)) } return ( <div className="Login"> <div className="card"> <div className="left"> <h1>Hello world</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati aspernatur illum porro dolorum numquam corporis adipisci quos magni voluptatum nostrum soluta excepturi, vel quas libero exercitationem dignissimos! Nostrum, earum ex? </p> <span>Don't you ave an account?</span> <Link to="/register"> <button>Register</button> </Link> </div> <div className="right"> <h1>Login</h1> <form onSubmit={handleLogin}> <div> <span style={{display: isCorrect ? "none" : "inline", color:"red"}}>Email or Password is incorrect!</span> </div> <input onChange={handleChange} name='email' value={email} type="email" placeholder="Enter Email" /> <div> <input onChange={handleChange} name='password' value={password} type= {showpass ? "text" : "password"} placeholder="Password" /> {!showpass ? <VisibilityIcon onClick={()=>setShowpass(!showpass)} className="showpass"/> : <VisibilityOffIcon onClick={()=>setShowpass(!showpass)} className="showpass"/>} </div> <button type="submit" onClick={()=>setClicked(true)}>Login</button> </form> </div> </div> </div> ) }

لأنه عندما أقوم بعملية تسجيل الدخول يقوم الكونسول بطباعة console.log موجودة في login.jsx وأخرى موجودة في ملف authActions.js

لا هل أجرب هذا في ملف login.jsx أو ملف authActions.js ؟

هل عرفت ماهو الخطأ أخي

هذه ملفات المشروع the-project.rar

أقوم بعمل مشروع بـ MERN وأعمل الان على عملية مصادقة المستخدم عندما أضغط على زر "تسجيل دخول" المفترض أن يقوم الكونسول في المتصفح بطباعة رمز التوكن وينقلني للصفحة الرئيسية ولكن بدلا من ذلك يقوم بنقلي للصفحة الرئيسية بشكل طبيعي ولكن الكونسول لا يقوم بطباعة التوكن فقمت بتعطيل الكود الذي ينقلني للصفحة الرئيسية ثم بعد التجربة اكتشفت أن في الضغطة الأولى على الزر يقوم الكونسول بطباعة الداتا بشكل طبيعي و status 200 ويطبع توكن فارغ والضغطة الثانية يقوم بطباعة التوكن بشكل طبيعي ولم أعرف مالخطأ في الأكواد فأرجو المساعدة في ذلك ملف authAction.js import {postDataApi} from "../../utils/fetchDataApi"; import {ALERT_TYPES} from "./alertActins"; export const TYPES = { AUTH : 'AUTH' } export const login = (data) => async (dispatch) => { try { const res = await postDataApi(`login`, data) console.log(res); localStorage.setItem('login', true); dispatch({ type: 'AUTH' , payload: { token: res.data.access_token, user: res.data.user } }) // dispatch({ // type: ALERT_TYPES.ALERT, // payload: { // loading: true, // } // }) // console.log(data) localStorage.setItem('login', true); // dispatch({ // type: ALERT_TYPES.ALERT, // payload: { // success: res.data.msg // } // }) } catch (error) { console.log(error); // dispatch({ // type: ALERT_TYPES.ALERT, // payload: { // error: error.response.data.msg, // } // }) } } export const refreshToken = () => async (dispatch) => { const login = localStorage.getItem('login') // console.log(login); if(login) { // dispatch({ // type: 'ALERT', // payload: { // loading: true // } // }) try { const res = await postDataApi('refresh_token'); dispatch({ type: 'AUTH' , payload: { token: res.data.access_token, user: res.data.user } }) // dispatch({ // type: ALERT_TYPES.ALERT, // payload: { // success: res.data.msg // } // }) } catch (error) { console.log(error); // dispatch({ // type:'ALERT', // payload: { // error: error.response.data.msg // } // }) } }} ملف login.jsx import { useState } from "react"; import { Link } from "react-router-dom"; import "./login.scss"; import axios from "axios"; import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import {login} from "../../redux/actions/authActions.js"; import {useDispatch, useSelector} from "react-redux"; import Alert from "../../components/Alert"; export default function Login() { const initialState = {email:'', password: ''} const [showpass, setShowpass] = useState(false); const [userData, setUserData] = useState(initialState); const [isCorrect, setIsCorrect] = useState(true); const auth = useSelector(state => state); const dispatch = useDispatch(); const {email, password} = userData; const handleChange = (e) => { const {name, value} = e.target; setUserData({...userData, [name]:value }) } const handlevaid = async () => { if (!auth.token) setIsCorrect(false); }; const handleLogin = async (e) => { e.preventDefault(); setUserData({email, password }) dispatch(login(userData)) await handlevaid() console.log(auth) } // const handleLogin = async (e) => { // e.preventDefault(); // try { // const config = { // headers: { // "Content-type":"application/json" // } // } // const { data } = await axios.post( // '/api/users/login', // { // email, // password, // }, // config // ); // console.log(data); // localStorage.setItem("userInfo", JSON.stringify(data)); // } catch (error) { // console.log(error);//.response.data.message // } // }; return ( <div className="Login"> <div className="card"> <div className="left"> <h1>Hello world</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati aspernatur illum porro dolorum numquam corporis adipisci quos magni voluptatum nostrum soluta excepturi, vel quas libero exercitationem dignissimos! Nostrum, earum ex? </p> <span>Don't you ave an account?</span> <Link to="/register"> <button>Register</button> </Link> </div> <div className="right"> {/* {error && <ErrorMessage>{error}</ErrorMessage>} */} {/* {loading && <Loading />} */} <h1>Login</h1> <form onSubmit={handleLogin}> <div> <span style={{display: isCorrect ? "none" : "inline", color:"red"}}>Email or Password is incorrect!</span> </div> <input onChange={handleChange} name='email' value={email} type="email" placeholder="Enter Email" /> <div> <input onChange={handleChange} name='password' value={password} type= {showpass ? "text" : "password"} placeholder="Password" /> {!showpass ? <VisibilityIcon onClick={()=>setShowpass(!showpass)} className="showpass"/> : <VisibilityOffIcon onClick={()=>setShowpass(!showpass)} className="showpass"/>} </div> <button type="submit">Login</button> </form> </div> </div> </div> ) } ملف fetchDataApi.js import axios from "./axios"; export const getDataApi = async (url, token) => { const res = await axios.get(`/api/${url}`, { headers: {Authorization: token} }) return res; } export const postDataApi = async (url, post, token) => { const res = await axios.post(`/api/${url}`, post, { headers: {Authorization: token} /* headers: { Accept: "application/json", Authorization: `Bearer${token}` } */ }) // console.log(res.data.access_token); return res; } export const putDataApi = async (url, post, token) => { const res = await axios.put(`url/${url}`, post, { headers: {Authorization: token} }) return res; } export const patchDataApi = async (url, post, token) => { const res = await axios.patch(`url/${url}`, post, { headers: {Authorization: token} }) return res; } export const deleteDataApi = async (url, token) => { const res = await axios.delete(`url/${url}`, { headers: {Authorization: token} }) return res; } صورة الكونسول

إذا هل عرفت مالمشكلة التي تمنعني من تسجيل مستخدم جديد؟

بالنسبة للقيود من المفترض أن تظهر رسالة خطأ تقول أن المستخدم موجود ولكن كما قلت لي هناك مشكلة في تسجيل المستخدم أول مرة

أعمل على نظام مصادقة المستخدم "authentication" لموقعي الإلكتروني وعملت أكود لعملية التسجيل والمفترض من النظام أنه عندما يحاول شخص ما التسجيل باسم مستخدم موجود مسبقا يُظهر له النظام أن المستخدم موجود مسبقا ولكن في البوستمان تحدث عملية التسجيل مرة أخرى حتى ولو كان المستخدم موجود وكأنه غير موجود مع العلم أن المستخدم الجديد لا يتم إضافته إلى قاعدة البيانات الخاصة بي في mongoDB جربت الحلول التالية: - تأكدت من IP الخاص بي وقد تم تضمينه في network access الخاص بحسابي في موقع mongoDB أي انه ليس هو المشكلة - قمت بإطفاء السيرفر ثم أعدت تشغيله وبلا فائدة أرجو ممن يمكنه مساعدتي الإطلاع على ملف الباك إند المرفق backend.rar

شكرا لك أخي

backend.rar عملية التسجيل تتم بنجاح ولكن تسجيل الدخول هو الذي تحدث به اخطاء

قمت بعمل دالة ب جافاسكريبت لعملية المصادقة authentication والمطلوب من الكود هو التحقق من تطابق كلمة المرور المدخلة مع كلمة المرور الموجودة و المشفرة في قاعدة البيانات بعد فك تشفيرها اثناء عملية تسجيل الدخول فاذا كانت كلمة المرور المدخلة مطابقة للناتجة من عملية فك التشفير تتم عملية تسجيل الدخول بنجاح ولكن عندما أجرب الأمر في البوستمان يظهر لي خطأ كما هو موضح في الصور المرفقة الكود له صورتين وجربتهم الأثنين وكلهم نفس الخطأ بالمناسبة أنا أستعمل node js & express js ابجد هوز حطي كلمن

عندما أستعمل useNavigate يقوم بعمل ريندر لانهائي ويظهر لي هذا الخطأ في الكونسول Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

أقوم بتطوير موقع حاليا وقد قمت بعمل المنطق البرمجي لعملية تسجيل الدخول بحيث يقوم النظام تلقائيا نقل المستخدم إلى الصفحة الرئيسية بمجرد ان تتم عملية تسجيل الدخول ولكن عندما أقوم بمحاولة تسجيل الدخول يظهر لي خطأ في المتصفح (يوم أمس كان يظهر لي خطأ مختلف عن اليوم وهو الموجود في الصورة الاولى) (الخطأ الذي يظهر اليوم موجود في الصورة الثانية) جربت استعمال history ولم ينجح الأمر ثم جربت useNavigate وأيضا لم ينجح الأمر

أخي الـ port الـ 3000 هو الخاص بالرياكت

api.rar

عندما أحاول تسجيل الدخول لمشروعي عن طريق البوستمان يتم الأمر بالشكل المناسب وتحدث عملية تسجيل الدخول ولكن عندما أحاول ذلك من خلال صفحة تسجيل الدخول لا تتم العملية ويظهر لي خطأ كما هو موضح في الصورة المرفقة ما يحيرني هو أن عملية تسجيل الدخول تتم من خلال البوستمان ولكن في الموقع نفسه لا يتم ذلك (ملف login من الفرونت إند مرفق) و (ملف اليوزر من الباك إند مرفق أيضا) بالمناسبة أنا أطور موقعي بالرياكت والباك إند بـ node.js & express وقاعدة البيانات mongoDB Login.rar users.rar

حسنا شكرا لك أخي

لقد وجد مشروع في غيتهب وكان الباك إند الخاص به يناسب مشروعي ولكن المشكلة أن الباك إند مبني بطريقة تجعله يتعامل مع mySQL وأنا لا أتقنه جيدا لذلك أريد أن أغير في الأكواد (مايحتاج منها إلى تغيير) لأجعله يتعامل مع mongoDB بدلا عن mySQL ولكن لفعل ذلك يجب أن يكون المبرمج يتقن النظامين (mySQL و mongoDB) ليعرف كيف يفعل ذلك، فأرجو أن يساعدني من يمكنه المساعدة وشكرا ملف الباك إند مرفق api.rar

قمت بعمل تطبيق وانتهيت منه وأردت رفعه على firebase وعندما أكتب في التيرمنال firebase deploy يظهر كل شيء جيد ثم يظهر لي الرابط الخاص بالموقع في التيرمنال بشكل طبيعي ولكن عندما أضغط عليه لفتح الموقع تظهر لي رسالة مكتوب فيها Welcome Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! كما هو واضح في الصورة المرفقة الصورة الأولى يظهر كل شيء سليم في التيرمنال والصورة الثانية هي الصفحة التي تظهر عندما أضغط على الرابط الذي تم توضيحه في الصورة الأولى

؟

وكيف أحل هذه المشكلة أخي؟

c4a.dev.rar إذا عرفت حل المشكلة أخبرني وسأرد عليك بعد الصلاة أخي أنا ذاهب للصلاة الان