时间戳

首页 > 解决方案 > 我无法获得每个调度工作的索引

reactjs - 我无法获得每个调度工作的索引

问题描述

单击按钮时如何让调度识别每个产品？

当 HTML 通过示例数组映射时，会给出一个索引。但是当我单击按钮添加到购物车时，数组对象的元素，它显示未定义

{type: "ADD_TO_CART", item: {...}}
item: {id: undefined, name: undefined, price: undefined, desc: undefined, type: undefined, ...}
type: "ADD_TO_CART"

这是 Menu.js

import React, { useState } from 'react';
import examples from './examples';
import './Menu.css';
import { useStateValue } from './StateProvider';

const Menu = ({ id, name, imgUrl, desc, price, type }) => {
    const [dishes, setDishes] = useState(examples);
const [, dispatch] = useStateValue();

const addToCart = () => {
    // add item to basket
    dispatch({
        type: 'ADD_TO_CART',
        item: {
            id,
            name,
            price,
            desc,
            type,
            imgUrl,
        },
    });
};

return (
    <div className='menu'>
        <h1>Menu</h1>
        <div className='menu__starters'>
            <h1>Starters</h1>
            {dishes.map((dish, index) => (
                <div className='menu__column'>
                    <div className='menu__row'>
                        <div className='menu__card' key={index}>
                            <div className='menu__img'>
                                <img src={dish.imgUrl} alt='img' />
                            </div>
                            <div className='menu__desc'>
                                <div className='menu__name'>
                                    <h2>{dish.name}</h2>
                                </div>
                                <div className='menu__description'>
                                    <p>{dish.desc}</p>
                                </div>
                                <div className='menu__credentials'>
                                    <div className='menu__price'>
                                        <h5>Damage- ${dish.price}</h5>
                                    </div>
                                    <div className='menu__button'>
                                        <button onClick={addToCart} key={index}>
                                            Add to Cart ->
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>`

对象数组位于导出的另一个文件 examples.js 中。这是 reducer.js

export const initialState = {
cart: [],
};

function reducer(state, action) {
    console.log(action);
    switch (action.type) {
        case 'ADD_TO_CART':
            // logic for adding item to cart
            return { state };
            break;
        case 'REMOVE_FROM_CART':
            //logic for removing item from cart
            return { state };
            break;
        default:
            return state;
    }
}

export default reducer;`

块引用

标签： reactjsreact-context

解决方案

它是未定义的，因为这些变量未在addToCart范围内定义，您尚未将任何数据传递给它。

你必须把菜放进去addToCart

<button onClick={()=>addToCart(dish)} ...>

和

const addToCart = ({ id, name, imgUrl, desc, price, type }) => {...}

推荐阅读