محمود_سعداوي نشر 19 نوفمبر 2022 أرسل تقرير مشاركة نشر 19 نوفمبر 2022 السلام عليكم. كيف يمكنني إصلاح الشيفرة التالية: function Notes({notes}) { return ( <div className='notes'> { if (notes.length !== 0) { notes.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } } <button className='add-btn'>+</button> </div> ) } للتوضيح: قمت بجلب notes من import React , {useState} from 'react' import './AddNoteForm.css'; import Alert from '../Alert/Alert' import Notes from '../Notes/Notes' function AddNoteForm() { const [title,setTitle] = useState('') const [content,setContent] = useState('') const [error,setError] = useState(false) const [notes,setNotes] = useState([]) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) } } return ( <form> <input className='title-content input' type='text' placeholder='title' value={title} onChange={handleChange_title} /> <textarea className='note-content input' type='text' placeholder='text' rows='8' value={content} onChange={handleChange_content} /> <input className='input-btn input' type='submit' value='Save' onClick = {saveNoteHandler} /> {error ? <Alert/> : ''} </form> ) } export default AddNoteForm شكرا 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 مرحباً محمود، جرب وضع إشارة استفهام بين الـ notes و الـ map كالتالي : notes?.map وهذا يعني إذا كانت الـ notes موجودة، قم بعمل map وإلا قم بإعادة undefined. { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } // وشكل آخر هو notes.lenght !== 0 && notes.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) حيث أن الـ && تعني إذا كان الأول صحيحاً أعد الثاني. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 20 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ 37 دقائق مضت قال عمر قره محمد: مرحباً محمود، جرب وضع إشارة استفهام بين الـ notes و الـ map كالتالي : notes?.map وهذا يعني إذا كانت الـ notes موجودة، قم بعمل map وإلا قم بإعادة undefined. { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } // وشكل آخر هو notes.lenght !== 0 && notes.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) حيث أن الـ && تعني إذا كان الأول صحيحاً أعد الثاني. ظهرت رسالة الخطأ التالية Notes.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'lenght') at Notes (Notes.js:8:1) اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ منذ ساعة مضت قال محمود سعداوي: ظهرت رسالة الخطأ التالية Notes.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'lenght') at Notes (Notes.js:8:1) إذا استخدم الطريقة الأولى : { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 20 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ الآن قال عمر قره محمد: إذا استخدم الطريقة الأولى : { notes?.map(note => { return <Note key={note.id} title={note.title} content={note.content}/> }) } قمت باستخدامها و لكن لاتوجد نتيجة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ منذ ساعة مضت قال محمود سعداوي: قمت باستخدامها و لكن لاتوجد نتيجة اعتقد ان ذلك لأنك لم تستخدم المكون Notes في الكود الخاص بك جرب إضافة الـ : <Notes notes={notes} /> وانظر كيف انها ستعمل بنجاح اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ منذ ساعة مضت قال محمود سعداوي: قمت باستخدامها و لكن لاتوجد نتيجة يمكنك تعيين قيمة افتراضية للمتغير notes تكون مصفوفة فارغة في حال لا يوجد بيانات، من داخل المكون يمكنك ذلك كالتالي: <div className='notes'> { (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>) } ... </div> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 20 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ 2 دقائق مضت قال Hassan Hedr: يمكنك تعيين قيمة افتراضية للمتغير notes تكون مصفوفة فارغة في حال لا يوجد بيانات، من داخل المكون يمكنك ذلك كالتالي: <div className='notes'> { (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>) } ... </div> هنا أيضا لم تظهر note في القائمة الجانبية شيفرة Notes import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes({notes}) { return ( <div className='notes'> { (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>) } <button className='add-btn'>+</button> </div> ) } export default Notes Note import React,{} from 'react' function Note({title}) { return ( <h2 className='note'> {title} </h2> ) } export default Note اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ منذ ساعة مضت قال محمود سعداوي: هنا أيضا لم تظهر note في القائمة الجانبية شيفرة Notes import React,{useState} from 'react' import './Notes.css' import Note from './Note' function Notes({notes}) { return ( <div className='notes'> { (notes || []).map(note => <Note key={note.id} title={note.title} content={note.content}/>) } <button className='add-btn'>+</button> </div> ) } export default Notes Note import React,{} from 'react' function Note({title}) { return ( <h2 className='note'> {title} </h2> ) } export default Note في حال لم يظهر أي عنصر يعني أن قيمة notes لم تمرر للمكون Notes واستُخدمت القيمة الافتراضية وهي المصفوفة الفارغة، لذا تأكد أن قيمة notes تمرر بشكل صحيح للمكون وتحوي قيمة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 20 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ 3 دقائق مضت قال Hassan Hedr: في حال لم يظهر أي عنصر يعني أن قيمة notes لم تمرر للمكون Notes واستُخدمت القيمة الافتراضية وهي المصفوفة الفارغة، لذا تأكد أن قيمة notes تمرر بشكل صحيح للمكون وتحوي قيمة لا يمكنني تمرير مصفوفة فارغة import React , {useState} from 'react' import './AddNoteForm.css'; import Alert from '../Alert/Alert' import Notes from '../Notes/Notes' function AddNoteForm() { const [title,setTitle] = useState('') const [content,setContent] = useState('') const [error,setError] = useState(false) const [notes,setNotes] = useState([]) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) } } return ( <form> <input className='title-content input' type='text' placeholder='title' value={title} onChange={handleChange_title} /> <textarea className='note-content input' type='text' placeholder='text' rows='8' value={content} onChange={handleChange_content} /> <input className='input-btn input' type='submit' value='Save' onClick = {saveNoteHandler} /> {error ? <Alert/> : ''} </form> ) } export default AddNoteForm أرجو المساعدة من خلال الإطلاع على كامل الكود في الرابط التالي https://github.com/Saadaoui-Forkan/my-to-do-lidt شكرا اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ منذ ساعة مضت قال محمود سعداوي: لا يمكنني تمرير مصفوفة فارغة import React , {useState} from 'react' import './AddNoteForm.css'; import Alert from '../Alert/Alert' import Notes from '../Notes/Notes' function AddNoteForm() { const [title,setTitle] = useState('') const [content,setContent] = useState('') const [error,setError] = useState(false) const [notes,setNotes] = useState([]) const handleChange_title = (e) => { setTitle(e.target.value) } const handleChange_content = (e) => { setContent(e.target.value) } const saveNoteHandler = (e) =>{ e.preventDefault() if (title.length === 0 || content.length === 0) { setError(true) } else{ setError(false) const note = { id : new Date(), title : title, content : content } const updatedNotes = [...notes,note] setNotes(updatedNotes) } } return ( <form> <input className='title-content input' type='text' placeholder='title' value={title} onChange={handleChange_title} /> <textarea className='note-content input' type='text' placeholder='text' rows='8' value={content} onChange={handleChange_content} /> <input className='input-btn input' type='submit' value='Save' onClick = {saveNoteHandler} /> {error ? <Alert/> : ''} </form> ) } export default AddNoteForm أرجو المساعدة من خلال الإطلاع على كامل الكود في الرابط التالي https://github.com/Saadaoui-Forkan/my-to-do-lidt شكرا في الشيفرة المرفقة لا يوجد استخدام للمكون Notes تأكد من مكان استخدامه وطريقة تمرير تلك الخاصية، كما يرجى إرفاق الجزء من الشيفرة الخاص بذلك الاستخدام بدلًا من رابط خارجي 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 20 نوفمبر 2022 الكاتب أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ 26 دقائق مضت قال Hassan Hedr: في الشيفرة المرفقة لا يوجد استخدام للمكون Notes تأكد من مكان استخدامه وطريقة تمرير تلك الخاصية، كما يرجى إرفاق الجزء من الشيفرة الخاص بذلك الاستخدام بدلًا من رابط خارجي قمت باستخدام Notes في App.js import React, {} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; function App() { return ( <div className='app'> <Notes className='notes'/> <AddNoteForm className='add-note-form'/> </div> ); } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 20 نوفمبر 2022 أرسل تقرير مشاركة نشر 20 نوفمبر 2022 بتاريخ 5 ساعات قال محمود سعداوي: قمت باستخدام Notes في App.js import React, {} from 'react' import Notes from './Notes/Notes'; import './App.css'; import AddNoteForm from './AddNoteForm/AddNoteForm'; function App() { return ( <div className='app'> <Notes className='notes'/> <AddNoteForm className='add-note-form'/> </div> ); } لاحظ أنك لم تمرر للمكون Notes الخاصية notes وهذا سبب المشكلة، يجب تمرير تلك الخاصية كالتالي: <Notes notes={...} .../> ^ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
كيف يمكنني إصلاح الشيفرة التالية:
للتوضيح: قمت بجلب notes من
شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
12 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.