用 react 和 redux 修改数量

Question

我正在使用 React 启动 redux，我无法更改购物车中的商品数量，我已经尝试了很多我在论坛上看到的东西，但它不起作用。我正在使用 redux.When 的 useDispatch 和 useSelector 我尝试更改数量我无法更改 quantity.Thank 的值你求助

页面篮：

import { useSelector, useDispatch } from 'react-redux';
import "../../css/Panier.scss"

const Panier = () =>{
    const {quantite} = useSelector(state => state)
     console.log(quantite)
    const dispatch = useDispatch();
    const {panier} =useSelector(state => state)
    console.log(panier)
    const add = (id) =>{
        console.log(id)
            dispatch({
                type:  "ADDQUANTITY",
                id : id
            })
    }
    
    return (
        <div className='container_panier'>
            <div>
                <div className='header_panier'>
                    <h2 className='header_panier__h2'>Panier</h2>
                </div>
                <div className='container_command'>
                {panier.map((paniers) => 
                    <ul className='listBurger' key={paniers.id}>
                        <div className='container_command_panier_image'>
                            <img className='container_command_panier_images' src= {paniers.image} />
                        </div>
                        <div className='panier-text'>
                            <li className='panier-text_menu'>{ paniers.burger }</li>
                            <li className='panier-text_menu'>{ paniers.prix } €</li>
                            <li className='panier-text_menu'>{quantite}</li>
                            <div>
                                <button onClick={()=>add(panier)} >+</button> 
                            
                            </div>
                        </div>
                    </ul>    
                )}
                </div>
            </div>       
        </div>
    )  
}

export default Panier;

页面缩减器


const initialState = {
    cardFinal:" ",
    prix:"",
    plats: [
        {id: 1, burger: "Giant", image: giant,prix: "4.90"},
        {id: 2, burger: "fish",image: Fish, prix: "5.20"},
        {id: 3, burger: "chicken", image: lchicken prix: "6.10"},
        {id: 4, burger: "Lacon", image: lbacon prix: "5.90"},
        {id: 5, burger: "chicken dips", image: cchicken prix: "4.50"},
    ],

   panier: [],
    prixFinal: 0,
    quantite: 0,
}

/export default function (state = initialState, action = {}) {

    console.log(state.panier)
    switch (action.type) {

        case "ADDQUANTITES":
            let newPanier = [...state.panier]
            let itemIndex = state.panier.findIndex(obj => obj.id === action.payload.id)
            let currentItem = state.panier[itemIndex]

            if(currentItem){
                currentItem.quantite = parseInt(currentItem.quantite) +1
                state.panier[itemIndex] = currentItem;
                newPanier = [...state.panier]

            }else{
                newPanier = newPanier.concat(action.payload)
                console.log(newPanier)
            }
            return{
                panier: newPanier
        }
       default: return state
    }
}

Answer 1

1- 您的操作类型在组件和 reducer 函数中不相等（“ADDQUANTITY”和“ADDQUANTITES”），这意味着您没有分派任何操作并且 reducer 正在 return默认状态。

2 - 您的调度没有负载值，您只添加了 'id'，它应该是 '({ type: "ADDQUANTITES"", payload : { id: id }})。

3 - 您的操作中的 returned 对象仅 returning 对象 'panier'，您应该 return 整个状态和 newPanier 对象本身: return { ...state, panier: neePanier }

用 react 和 redux 修改数量

modification of the quantity with react and redux

javascript

reactjs

redux