redux 未捕获的类型错误：无法读取未定义的属性(阅读“image”)

4nkexdtk 于 9个月前发布在其他

关注(0)|答案(2)|浏览(98)

我无法修复bug

const products = useSelector((state) => state.cart)

我正在控制台中获取未定义的值

import { useSelector } from 'react-redux'

const Cart = () => {
  const products = useSelector((state) => state.cart)
  console.log('products : ' + products);
  return (
    <>
      <div className='container'>
        {
          products.map((e) =>
            <div className='col-sm-6 col-md-6 col-lg-4 col-xl-3 py-1' key={e.id}>
              <div className="card" style={{ width: "18rem", margin: "auto", height: '25rem' }} >
                <img src={e.image} className="card-img-top" alt="..." style={{ width: "16rem", height: "14rem" }} />
                <div className="card-body">
                  <p className="card-title">{e.title}</p>
                  <h5 className="card-text">${e.price}</h5>
                  <button className="btn btn-primary">Add to Cart</button>
                </div>
              </div>
            </div>
          )
        }
      </div>
    </>
  )
}

export default Cart

这是我的cartSlice部分

import { createSlice } from '@reduxjs/toolkit'

const cartSlice = createSlice({
    name: 'cart',
    initialState: [],
    reducers: {
        add(state, action){
            state.push(action.payload)
        },
        remove(state, action){
            return state.filter(item => item.id !== action.payload)
        }
    }
})

export const {add, remove} = cartSlice.actions;
export default cartSlice.reducer;

请帮帮我
在下面的代码中，我们得到了值，但数据未定义

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

const Navbar = () => {

    const item = useSelector((state)=> state.cart)
    console.log(item);
    const navStyle = { cursor: 'pointer'}
    return (
        <>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <Link className="navbar-brand" to={'/'}>Navbar</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav m-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <Link className="nav-link active" aria-current="page" to={'/'}>Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to={'/cart'}>cart</Link>
                            </li>
                            <li className="nav-item">
                                <span className="nav-link" style={navStyle} to={'/'}>Count item : {item.length}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </>
    )
}

export default Navbar

redux

来源：https://stackoverflow.com/questions/76931753/uncaught-typeerror-cannot-read-properties-of-undefined-reading-image

2条答案

按热度按时间

nzkunb0c1#

我没有在onClick{（）=> tokeClick（item）}中发送正确的值，我没有将item作为tokeClick方法的参数传递。这就是为什么它选择未定义的值。传递项目作为参数后，代码工作正常.
谢谢你的帮助：）

赞(0）回复(0）举报 9个月前

but5z9lq2#

import { configureStore, createSlice } from '@reduxjs/toolkit';
    
    const cartSlice = createSlice({
      name: 'cart',
      initialState: {
        products: [] // Initial state with an empty products array
      },
      reducers: {
        addToCart: (state, action) => {
          state.products.push(action.payload);
        }
        // Other reducers can be added here if needed
      }
    });
    
    export const { addToCart } = cartSlice.actions;
    
    const store = configureStore({
      reducer: {
        cart: cartSlice.reducer
      }
    });
    
    export default store;
    
    
    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { addToCart } from './store'; // Update the path accordingly
    
    const Cart = () => {
      const products = useSelector(state => state.cart.products);
      const dispatch = useDispatch();
    
      return (
        <div>
          <h2>Cart</h2>
          {products.map(product => (
            <div key={product.id}>
              <img src={product.image} alt={product.title} />
              <h3>{product.title}</h3>
              <p>${product.price}</p>
              <button onClick={() => dispatch(addToCart(product))}>Add to Cart</button>
            </div>
          ))}
        </div>
      );
    };
    
    export default Cart;

赞(0）回复(0）举报 9个月前

我来回答

redux 未捕获的类型错误：无法读取未定义的属性(阅读“image”)

2条答案

相关问题

热门标签

最新问答