فينيكس العربي

أنا أعمل على مشروع بـ next.js 14 واستعمل Typescript في المشروع وعندما أحاول أن أقوم بعمل deploy للمشروع على vercel لا يتم الأمر بشكل صحيح صورة الخطأ مرفقة. ويبدو أن المشكلة في ملف news.tsx وقد أرفقت الملف المذكور. كان يظهر لي خطأ في السطر 19 في الملف عند الـ type الخاص بـ article كلمة any ولكن تخلصت من الخطأ من خلال وضع هذا التعليق {/* eslint-disable-next-line */} فوق سطر الخطأ ولكن قد يكون هذا الخطأ هو الذي يعطل عملية الـ deploy News.tsx

يظهر النص في المقالة كعنصر html

هذه الطريقة تعمل في المعاينة فقط ولكن بمجرد أن أقوم بنشر المقالة يظهر النص في المقالة كنص عادي

أعمل حاليا على مدونة وأستخدم next.js 14 كإطار عمل لتطويرها وهذه المدونة تتيح لبعض المستخدمين بنشر مقالات فيها وما أحاول فعله حاليا هو أنه عندما يبدأ المستخدم بكتابة مقالته في text area ثم إذا قام أثناء كتابة المقالة بكتابة اسم المدونة في داخل مقالته. . . تلقائيا تتفعل دالة على اسم المدونة فقط بحيث يصبح اسم المدونة بالخط العريض وباللون الأزرق وتكون الكلمة عبارة عن رابط قابل للضغط عليه بحيث ينقل المستخدم للصفحة الرئيسية إذا قام بالضغط عليه، اسم المدونة phoenix وشكرا

الان أصبح يقوم بحذف البوست مباشرة عند الضغط على delete post ولا يعطيني فرصة للإلغاء

مازلت عالق أخي اكتب لي الطريقة كاملة إن أمكن دقيقة سأرسل الكود const [showDeleteMessage, setShowDeleteMessage] = useState(false); const [stopDeleting, setStopDeleting] = useState(false); const [deleting, setDeleting] = useState(false); const handleStopDeleting = () => { setStopDeleting(true); setShowDeleteMessage(false); console.log("Stop deleting!"); }; const deleteMyPost = async () => { try { // عملية حذف البوست } catch (error: any) { // الخطأ } }; const confirmDeleting = () => { setShowDeleteMessage(true); const timeout = setTimeout(() => { if (!stopDeleting) { setDeleting(true); deleteMyPost(); } }, 5000); if (stopDeleting) { clearTimeout(timeout); } }; return { <button onClick={confirmDeleting}> "delete post" </button> <button onClick={handleStopDeleting}> "cancel" </button> } هذا هو الكود أخي ليس بالضرورة أن تكون setTimeout و clearTimeout في نفس الدالة المهم أن تؤدي المطلوب

ما القيمة الإفتراضية للuseState

سأحاول ولكن ما لقيمة الإفتراضية للuseState

أحاول كتابة دالة تقوم بعمل إجراء معين بعد عدة ثواني عند الضغط على زر محدد وهناك زر آخر الغرض منه إيقاف هذا الإجراء إذا تم الضغط عليه قبل انتهاء الوقت المحدد في setTimeout ولكن الإجراء يتم سواء ضغطت على زر الإيقاف أم لم أضغط ولا أعرف ما لخطأ في الكود هذا هو الكود const confirmAction = () => { // هذه الدالة تبدأ العمل عندما يتم الضغط على زر محدد setShowActionMessage(true); const timeout = setTimeout(() => { if (!stopAction) { setAction(true); doTheAction(); // هذه الدالة المستهدفة من هذه العملية } }, 5000); if (stopAction) { // عند الضغط على زر الإيقاف true هذه الحالة تصبح clearTimeout(timeout); } }; كما ترون أنا أستعمل الريآكت وأستخدم ال useState و if condition للوصول للنتيجة المرغوبة ولكن للأسف الدالة المستهدفة لا يتم إيقافها ولا أعرف لماذا وهي تتفعل بعد انتهاء الـ 5 ثواني

جربت الحل ولم يعد يقوم بـ render لانهائي ولكن لم تعد المحادثات تظهر فقمت بتعديل الكود قليلا ومازالت المحادثات لاتظهر فقمت بنسخ رسالة الخطأ فظهرت لي هذا الرسالة في الكونسول `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context هذا الكود بعد تعديله "use client"; import { Key, useEffect, useState } from "react"; import { auth } from "@/auth"; import { getUsersForSidebar } from "@/lib/data"; import Chat from "./chat"; import { IChatDocument } from "@/models/chatModel"; const Chats = () => { const [selectedChat, setSelectedChat] = useState<IChatDocument | null>(null); const [chats, setChats] = useState<IChatDocument[] | null | any>([]); const [loading, setLoading] = useState<boolean>(true); const [error, setError] = useState<string | null>(null); useEffect(() => { const fetchData = async () => { try { const session = await auth(); if (session?.user) { const chatsData = session?.user ? await getUsersForSidebar(session.user._id) : []; setChats(chatsData); } return; } catch (error: any) { setError(error.message); console.log(error.message); } finally { setLoading(false); } }; fetchData(); }, []); const handleSelectedChat = (chat: IChatDocument) => setSelectedChat(chat); if (loading) return <p>Loading...</p>; if (error) return <p>{error}</p>; return ( <nav className="flex-1 overflow-y-auto"> <ul> {chats.map((chat: { _id: Key | null | undefined }) => ( <Chat key={chat._id} chat={chat} handleSelectedChat={handleSelectedChat} selectedChat={selectedChat} /> ))} </ul> </nav> ); }; export default Chats;

أعمل على مشروع قمت بعمله بـ nextJS 14 و typescript وكان الموقع يعمل بشكل طبيعي ولكن فجأة ظهر خطأ عندما أنتقل لصفحة chats يتوقف المتصفح عن الإستجابة ويحدث render لانهائي كما ترون في الصورة أدناه وفي أعلى الكونسول يظهر تحذير موضح في الصورة التي في الأسفل هذا ملف chats.tsx "use client"; import { auth } from "@/auth"; import { getUsersForSidebar } from "@/lib/data"; import Chat from "./chat"; import { useState } from "react"; import { IChatDocument } from "@/models/chatModel"; const Chats = async () => { const [selectedChat, setSelectedChat] = useState<IChatDocument | null>(null); const session = await auth(); const chats = session?.user ? await getUsersForSidebar(session.user._id) : []; const handleSelectedChat = (chat: IChatDocument) => setSelectedChat(chat); return ( <nav className="flex-1 overflow-y-auto"> <ul> {chats.map((chat) => ( <Chat key={chat._id} chat={chat} handleSelectedChat={handleSelectedChat} selectedChat={selectedChat} /> ))} </ul> </nav> ); }; export default Chats; الخطأ الذي يحدث فيه render لانهائي يشير إلى هذا السطر const session = await auth(); لذلك قد يكون ملف auth.ts له علاقة بالخطأ لهذا الكود الخاص بالملف في الأسفل import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import { connectToMongoDB } from "./lib/db"; import User from "./models/userModel"; import randomString from "random-string"; export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [ GitHub({ clientId: process.env.AUTH_GITHUB_ID, clientSecret: process.env.AUTH_GITHUB_SECRET, }), ], secret: process.env.AUTH_SECRET, callbacks: { async session({ session }) { try { await connectToMongoDB(); if (session.user) { const user = await User.findOne({ email: session.user.email }); if (user) { session.user._id = user._id; session.user.userCode = user.userCode; return session; } else { throw new Error("User Not Found!"); } } else { throw new Error("Invalid Session!"); } } catch (error) { console.log(error); // Throw an error or return null to indicate an invalid session throw new Error("Invalid session"); } }, async signIn({ account, profile }) { if (account?.provider === "github") { await connectToMongoDB(); try { const user = await User.findOne({ email: profile?.email }); // Sign up user if not found if (!user) { const coding = randomString({ length: 8, numeric: true, letters: true, special: false, }); const newUser = await User.create({ username: profile?.login, email: profile?.email, userCode: coding, fullName: profile?.name, avatar: profile?.avatar_url, }); await newUser.save(); } return true; // indicate successful sign-in } catch (error) { console.log("Sign in Error: ", error); return false; } } return false; }, }, });

شكرا لك أخي على الإجابة التفصيلية

أريد دالة في جافاسكريبت أستطيع من خلالها أن أختار كلمة تبدأ بحرف محدد وتنتهي بحرف محدد داخل تاق <p> في الصفحة لإعطائها className محدد مثلا لو كان النص "مرحبا بكم يا أصدقائي" أستطيع من خلال هذه الدالة أن أختار حرف أ كبداية وحرف ي كنهاية لتقوم هذه الدالة باختيار كلمة "أصدقائي" ثم أعطي الكلمة كلاس محدد لتحصل الكلمة على خصائص css خاصة ملاحظة: النص المحدد في الصفحة يتم استدعائه من الباك إند بطريقة ديناميكية هكذا <p>{text}</p> أرجو ممن يقوم بالإجابة عن سؤالي بأن يقوم بتوضيح الطريقة بمثال شكرا مقدما

حسنا فهمت ولكن أريد أن أسألك بعض الأمور على الخاص إن أمكن

عندما أحاول استعراض الملف الشخصي (profile) لمستخدم موجود في قاعدة البيانات يظهر الملف الشخصي للمستخدم مكرر وكأنه منسوخ ويظهر لي في الكونسول هذا الخطأ الموضح في الصورة المرفقة وهذا الكود <div className='ProfileInfo'> {userData.length > 0 && userData.map((user) => ( <div className='profileInfo-container' key={user._id} > <div className='profileInfo-top'> </div> <div className='profileInfo-center'> <img className='profile-avatar' fontSize="large" src={auth.user.avatar} alt=""/> {user._id && auth && user._id === auth.user._id ? <button className='addfbtn' onClick={()=>setEdit(true)}>EDIT</button> : <GlobalFriendBtn classBtn="addfbtn" user={user}/> } </div> ... إلخ