محمود_سعداوي نشر 29 يناير 2023 أرسل تقرير مشاركة نشر 29 يناير 2023 السلام عليكم في المثال التالي عندما أريد تغيير قيمة حقل معين، فقط تتغير قيمة آخر حقل مثلا لو تغيير العنصر الاول يرجع الأول كما هو و يتغير الحقل الثاني إلى القيمة التي وضعتها. لم أعرف أين يكمن المشكل. الشيفرة البرمجية: import { createSlice } from "@reduxjs/toolkit"; export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push(action.payload) }, deletePost : function (state,action) { state.postsArray = state.postsArray.filter(post => post.id !== action.payload) }, updatePost : function(state,action) { // console.log(state.postsArray) state.postsArray.map(p => { if (p.id === action.payload.id) { p.title = action.payload.title p.description = action.payload.description } }) } }, }) export const { addPosts,deletePost,updatePost } = postsSlice.actions; export default postsSlice.reducer; function Edit({setIsEdit,title,description,post}) { const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const [updateTitle,setUpdateTitle] = useState(title) const [updateDescription,setUpdateDescription] = useState(description) const handleUpdate = () =>{ dispatch(updatePost({id: post.id, title: updateTitle, description: updateDescription})) // console.log(posts) setIsEdit(false) } return ( <div className='edit-post'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style = {{ backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} // value={updateTitle} onChange = {(e)=>setUpdateTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" // value={updateDescription} style = {{ height: '100px', backgroundColor: 'transparent', color: '#fff', fontSize: '22px' }} onChange = {(e)=>setUpdateDescription(e.target.value)} /> </InputGroup> <Button size="lg" onClick={handleUpdate} > Update </Button> </Container> </div> ) } export default Edit شكرا على المساعدة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 يناير 2023 أرسل تقرير مشاركة نشر 29 يناير 2023 بتاريخ 15 دقائق مضت قال محمود سعداوي: شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality تفضل ملف الsrc src.zip 4.04 kB · 0 تنزيلات المشكلة هي انك تظهر كل لوحات التعديل الخاصة بكل المنشورات دفعة واحدة وذلك لأنك وضعت الشرط { isEdit && <Edit setIsEdit={setIsEdit} title={title} description={description} post={post} /> } داخل ال map التي تطبع كل المنشورات ولذلك فعندما يتحقق الشرط السابق ستظهر كل المكونات الـ Edit الخاصة بكل المنشورات. ولحل المشكلة يجب اخراج المكونة الخاصة بالتعديل Edit إلى خارج الـ map بحيث يكون هنالك Edit واحدة ولكن نمرر لها عنصر مختلف في كل مرة، وهذا سيتطلب إنشاء state جديدة لتحتوي هذا العنصر. ليصبح الكود كالتالي : import React, { useState } from 'react' import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; import Container from 'react-bootstrap/Container'; import Button from 'react-bootstrap/Button'; import { useDispatch, useSelector } from 'react-redux'; import { addPosts, deletePost } from '../redux/postsSlice'; import Edit from './Edit'; function Posts() { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [selectedPost, setSelectedPost] = useState("") // نضيف الوظيفة التالية ************ const dispatch = useDispatch() const posts = useSelector((state) => state.posts.postsArray) const handleClick = () => { dispatch(addPosts({ id: posts.length + 1, title, description, })) setTitle("") setDescription("") } // delete a post const handleDelete = (item) => { dispatch(deletePost(item)) } // Edit a Post const [isEdit, setIsEdit] = useState(false) // نعدل الوظيفة التالية **************************************** const handleEdit = (post) => { // اضفنا الباراميتر ************************************ setIsEdit(true) setSelectedPost(post) // الكود المضاف ************************************ } return ( <div className='posts'> <Container className='form'> <InputGroup className="mb-3"> <Form.Control style={{ color: '#000' }} placeholder='Post Title' value={title} onChange={(e) => setTitle(e.target.value)} /> </InputGroup> <InputGroup className="mb-3"> <Form.Control as="textarea" placeholder="Post Description" style={{ height: '100px', color: '#000' }} value={description} onChange={(e) => setDescription(e.target.value)} /> </InputGroup> <Button variant="primary" size="lg" onClick={handleClick} > Add Post </Button> </Container> <div className='posts'> { posts.length > 0 ? posts.map((post, index) => <div className='post-container' key={index} > <div className='post-title'> <h3>{post.title}</h3> </div> <div className='post-description'> <h5>{post.description}</h5> </div> <div className='btns'> <Button variant="outline-info" onClick={() => handleEdit(post)} > Edit </Button> <Button variant="outline-info" onClick={() => handleDelete(post.id)} > Delete </Button> </div> </div> ) : (<h1 className='no-posts'>No Posts</h1>) } {/* map نخرج المكون الخاص بالتعديل إلى خارج الـ *************************************/} { isEdit && <Edit setIsEdit={setIsEdit} title={selectedPost.title} // الكود المعدل ************************************ description={selectedPost.description}// الكود المعدل ************************************ post={selectedPost}// الكود المعدل ************************************ /> } </div> </div> ) } export default Posts 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 يناير 2023 أرسل تقرير مشاركة نشر 29 يناير 2023 ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات، وذلك لأنك وضعت الشرط if (p.id === action.payload.id) والذي سيغير معلومات كل منشور يملك نفس الـ id. فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id. في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 29 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 29 يناير 2023 بتاريخ 7 دقائق مضت قال عمر قره محمد: ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات، وذلك لأنك وضعت الشرط if (p.id === action.payload.id) والذي سيغير معلومات كل منشور يملك نفس الـ id. فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id. في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات. شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality تفضل ملف الsrc src.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم
في المثال التالي عندما أريد تغيير قيمة حقل معين، فقط تتغير قيمة آخر حقل
مثلا لو تغيير العنصر الاول
يرجع الأول كما هو و يتغير الحقل الثاني إلى القيمة التي وضعتها.
لم أعرف أين يكمن المشكل.
الشيفرة البرمجية:
import { createSlice } from "@reduxjs/toolkit"; export const postsSlice = createSlice ({ name : 'posts', initialState : { postsArray : [], }, reducers : { addPosts : function (state,action) { state.postsArray.push(action.payload) }, deletePost : function (state,action) { state.postsArray = state.postsArray.filter(post => post.id !== action.payload) }, updatePost : function(state,action) { // console.log(state.postsArray) state.postsArray.map(p => { if (p.id === action.payload.id) { p.title = action.payload.title p.description = action.payload.description } }) } }, }) export const { addPosts,deletePost,updatePost } = postsSlice.actions; export default postsSlice.reducer;
شكرا على المساعدة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.