اذهب إلى المحتوى
  • 0

عدم التعرف على المصفوفة و إرجاع القيمة undefined في مشروع react-redux

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

السؤال

السلام عليكم.

في الشيفرة لماذا ترجع قيمة 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

شكرا لكم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 31 دقائق مضت قال محمود سعداوي:

تفضل ملفات الsrc

src.zip 9.48 kB · 1 تنزيل

االكود الخاص بك :

const item = useSelector((state) => state.products.SingleProduct);

الكود الصحيح :

const item = useSelector((state) => state.products.singleProduct);

حيث انك كتبت singleProduct بحرف S كبير، بينما الاسم الصحي بالـ s الصغير.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...