محمود سعداوي2

السلام عليكم. في الكود التالي أود أن أسئل بعض الأسئلة: function App() { const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const data = await response.json() const newUser = [ { user: `${data.results[0].name.first} ${data.results[0].name.first}`, money: Math.floor(Math.random() * 1000000) } ] setData(newUser) } useEffect(() => { fetchRandomUsers(); }, []); عند تحديث الصفحة يظهر المستخدم الأول ثم يختفي بعد حوالي الثانية، لماذا. كيف يمكنني إظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة. (قمت بتجربة الكود التالي: useEffect(() => { fetchRandomUsers(); fetchRandomUsers(); fetchRandomUsers(); }, []); لكن في هذه الحالة يبقى مستخدم واحد يتغير كل ثانية) السؤال الأخير حول جودة الكود، هل هذا الكود قابل للتحسين و كيف ذلك. شكرا لكم.

عفوا src.zip

تفضل ملف الsrc نفس الشيء data.results هو object وبالتالي لا تنطبق عليه map

السلام عليكم. أريد جلب البيانات من الخادم ثم إظهارها على التطبيق الخاص بي. قمت بالكود التالي const [data, setData] = useState([]); // Fetch users const fetchRandomUsers = () => { fetch('https://randomuser.me/api') .then(response => response.json()) .then(data => setData(data.data)); } useEffect(() => { fetchRandomUsers() }, []); المشكلة هنا أني لا أستطيع تطبيق الدالة map على data بغرض إظهار users لأن: typeof(data) === object شكرا على التوضيح.

المشكلة كانت في مكان وضع console.log عندما وضعتها خارج الدالة handleClick تم تجاوز المشكل. شكرا لكم.

المشكل هنا selected.lengh غير مطابق

أريد أستخدام الهوكس لأني في حاجة فيما بعد لتكوين مصفوفة تحتوي selected seats جربت الحل الذي قدمتموه لي لكن الأمر كان في غاية التعقيد

السلام عليكم عند الضغط على كرسي يصبح لونه مختلف، إذا أردت حذف الكرسي أعيد الضغط عليه فيرجع لونه الأول ملاحظة: هل يمكن حل المشكل باستعمال الخطافات فقط أنا حاولت باستعمال الكود التالي، المشكل أنه لا أستطيع حجز أكثر من كرسي const handleClick = (id) => { setIndex(id) setIsSelected(!isSelected) } *********************** seatsArray.map(i => ( <div className = {index === i ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div> شكرا

السلام عليكم. في الكود التالي: const [seats,setSeats] = useState([]); const handleSeats = (e) => { e.target.classList.toggle('selected'); if (e.target.classList.contains('selected') && !e.target.classList.contains('occupied')) { setSeats([...seats,seats]) console.log(seats.length) } else { seats.splice(seats.indexOf(e.target.classList.contains('selected')),1) console.log(seats.length) } } المشكل هو عندما يصبح الكرسي الأول 'selected' تصير seats.length = 0 يعني عند النقر مثلا على أربع كراسي تصبح seats.length تساوي 3 بينما، عند إعادة الضغط على كرسي "selected" طول المصفوفة seats يكون مطابقا. زد على ذلك، عند تكون لدي كراسي "selected" ثم أضغط على كراسي محجوزة (باللون الأبيض) يرجع طول المصفوفة seats إلى الصفر شكرا لكم.

السلام عليكم. عند النقر على عنصر محدد أريد أن يتغير الكلاس به هو فقط. المشكل في الكود الذي حددته هو تغير كافة الكلاسات عند النقر على عنصر محدد. App js const [isSelected, setIsSelected] = useState(false); const [selectedIndex, setSelectedIndex] = useState(null) const handleClick = (id) => { // e.target.classList.toggle('selected') setIsSelected(!isSelected); setSelectedIndex(id) } Row.js function Row({id,handleClick,isSelected}) { return ( <div className='row'> { [...Array(8)].map((_,index)=>( <div className={ (id===1 && index===3) || (id===1 && index===4) || (id===2 && index===6) || (id===2 && index===7) || (id===4 && index===3) || (id===4 && index===4) || (id===5 && index===4) || (id===5 && index===5) || (id===5 && index===6) ? 'seat occupied' : isSelected ? 'seat selected' : 'seat' } key={index} onClick = {()=>handleClick(index)} > <div></div> </div> )) } </div> ) }

السلام عليكم. ماهي لغة البرمجة Rescript. هل هي إطار عمل للغة البرمجة javascript. شكرا.

شكرا على التوضيح، لقد ساعدني كثيرا. أنا وجدت هذا الحل، هل هو مثالي import React from 'react' function Row({id}) { // let rows = [1,2,4,5]; // let seats = [3,4,5,6,7] return ( <div className='row'> { [...Array(8)].map((_,index)=>( <div className={ (id===1 && index===3) || (id===1 && index===4) || (id===2 && index===6) || (id===2 && index===7) || (id===4 && index===3) || (id===4 && index===4) || (id===5 && index===4) || (id===5 && index===5) || (id===5 && index===6) ? 'seat occupied' : 'seat' } key={index} > <div></div> </div> )) } </div> ) } export default Row ********************************************************************************************* import React from 'react' import Row from './Row' function Rows() { return ( <div className='container'> <div className="screen"></div> <div className="rows"> { [...Array(6)].map((_,index)=>( <Row key={index} id={index} /> )) } </div> </div> ) } export default Rows

أنا قمت بالحل التالي import React from 'react' function Seat() { return ( <div className='seat'> <div></div> </div> ) } export default Seat import React from 'react' import Seat from './Seat' function Row() { return ( <div className='row'> <Seat /> <Seat /> <Seat /> <Seat /> <Seat /> <Seat /> <Seat /> <Seat /> </div> ) } export default Row import React from 'react' import Row from './Row' function Rows() { return ( <div className='container'> <div className="screen"></div> <div className="rows"> <Row/> <Row/> <Row/> <Row/> <Row /> <Row/> </div> </div> ) } export default Rows لكن المشكلة كيف أختار "occupied seats"

السلام عليكم. كيف يمكنني تحويل الشيفرة التالية إلى شيفرة jsx في ريآكت و باستعمال component <div class="container"> <div class="screen"></div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat occupied"></div> <div class="seat occupied"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat occupied"></div> <div class="seat occupied"></div> </div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat occupied"></div> <div class="seat occupied"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat occupied"></div> <div class="seat occupied"></div> <div class="seat occupied"></div> <div class="seat"></div> </div> </div> شكرا

السلام عليكم. أريد حذف منتج معين. قمت بكتابة الكود التالي: removeFromCart(state,action){ state.cartItems = state.cartItems.filter(item => item.id !== action.payload) } <i className="bi bi-trash fill cart-item-delete-icon" onClick={()=>dispatch(removeFromCart(item.id))} ></i> لكن تظهر لي رسالة الخطأ التالية: react-dom.development.js:16227 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Object.throwInvalidHookError (react-dom.development.js:16227:1) at useContext (react.development.js:1618:1) at useReduxContext (useReduxContext.js:21:1) at useStore (useStore.js:17:1) at useDispatch (useDispatch.js:14:1) at onClick (CartPage.jsx:43:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1) شكرا على المساعدة

السلام عليكم. في الموقع التعريفي(portfolio) يقع إدراج المشاريع المنجزة. هذه المشاريع طبعا قابلة للزيادة. بالنسبة لمطور واجهات أمامية كيف يمكنه ربط المشاريع التي وقعت إضافتها مع الموقع التعريف أو بالأحرى كيف يتم ربط admin dashboard مع الportfolio أم أن الأمر يتطلب التعامل مع الواجهات الخلفية. شكرا.

تفضل ملفات الsrc src.zip

السلام عليكم. في الشيفرة لماذا ترجع قيمة product إلى undefined SingleProduct import React from 'react' import { useSelector } from 'react-redux' // import { useParams } from 'react-router-dom' import './singleProduct.css' function SingleProduct() { const item = useSelector(state => state.products.SingleProduct) console.log(item) return ( <div> SingleProduct </div> ) } productSlice initialState: { singleProduct: [], }, **************************** **************************** singleProduct(state,action){ try { const singleItem = storeData.filter(item => item.id === action.payload) state.singleProduct = singleItem } catch (error) { } } ****************************** ****************************** export const { singleProduct } = productSlice.actions ملاحظة: للتوجه لهذه الصفحة يقع المرور بصفحة ProductCart هذه شيفرة ProductCart للتوضيح import React from 'react' import { useDispatch } from 'react-redux' import { Link, useParams } from 'react-router-dom' import { singleProduct } from '../../features/slices/productSlice' function ProductCard({id,img,name,text,price,color}) { const {type} = useParams() const dispatch = useDispatch() return ( <Link to={`/filteredProducts/${type}/${id}`} className = 'product-link' > <div className='product-card-container' onClick = {() => dispatch(singleProduct(id))} > <div className="prod-img"> <img src={img} alt={id}/> </div> <div className="prod-name"> <h4>{name}</h4> </div> <div className="prod-text"> <p>{text}</p> </div> <div className="prod-infos"> <h3>{price}$</h3> <div className="colors"> { color.map((item,key) => ( <div className="prod-card-color" key={key} style={{backgroundColor:`${item}`}}></div> )) } </div> </div> </div> </Link> ) } export default ProductCard شكرا لكم.

وجدت الحل. السبب هو position:absolute للصورة. و الحل هو في تحديد طول و عرض لعنصر يحتوي كامل الصور. /* الحل في إضافة هذا العنصر */ /* ----------------------- */ .slider-container { background-color: var(--color-2); width: 100vw; height: 90vh; padding: 15px auto; } /* ----------------------- */ .slider { position: relative; } .slide { width: 100vw; height: 80vh; position: absolute; }

أنا لا أريد أن تـكون NavigateButtons في أعلى الصفحة لم يتغير شيء تفضل ملفات الsrcsrc.zip شكرا. src.zip أعتذر عن وجود الكثير من الصور في غير موضعها. لم أفهم كيف حدث ذلك

في الحالات العادية يظهر المكون الأول ثم المكون الثاني (نفس العمود) (وهذا ما أريده) في هذ ا الكود .main { display: flex; flex-direction: column; } <div className='main'> <Slider/> <NavigateButtons/> </div> هذه هي النتيجة

أنا لا أريد أن يظهر المكونين على سطر واحد. وحتى عندما ب .main { display: flex; flex-direction: column; } تلخبطت الأمور و لم تظهر بالشكل الذي أريده

السلام عليكم. بقدر ما لغة بسيطة إلا أنه أحيانا أقع في مشكل كحفرة دب أعجز عن الخروج منها. في المثال التالي لم أفهم لماذا تظهر العناصر في سطر واحد. و كيف يمكن معالجة المشكل. <div className='main'> <Slider/> <NavigateButtons/> </div> شكرا

السلام عليكم. أريد إنشاء repository جديد على github. قمت باتباع التعليمات التي يقدمها github. المشكل في التعليمة الأخيرة بالنسبة لrepository لا أستطيع التعامل معها (كأنها فارغة) كيف يمكنني معالجة هذا الخطأ. شكرا.

السلام عليكم كيف يمكنني إعادة إظهار القوائم التالية في vs code شكرا