تغيير قيمة حقل باستعمال redux

بتاريخ 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

ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات،

وذلك لأنك وضعت الشرط 

if (p.id === action.payload.id)

والذي سيغير معلومات كل منشور يملك نفس الـ id.

فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id.

في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات.

بتاريخ 7 دقائق مضت قال عمر قره محمد:

ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات،

وذلك لأنك وضعت الشرط 

if (p.id === action.payload.id)

والذي سيغير معلومات كل منشور يملك نفس الـ id.

فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id.

في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات.

شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality

تفضل ملف الsrc

src.zip