使用react和redux修改數量

我正在用 react 開始 redux，我無法更改購物車中商品的數量，我已經嘗試了很多我在論壇上看到的東西，但它不起作用。我正在使用 for useDispatch 和 useSelector with redux。當我嘗試更改數量時，我無法更改數量的值。謝謝您的幫助

頁籃：

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
    }
}

uj5u.com熱心網友回復：

1-您的動作型別在組件和reducer函式（“ADDQUANTITY”和“ADDQUANTITES”）中不相等，這意味著您沒有調度任何動作并且reducer正在回傳默認狀態。

2 - 您的調度沒有有效負載值，您僅添加“id”，它應該是 '({ type: "ADDQUANTITES"", payload : { id: id }})。

3 - 從您的操作回傳的物件僅回傳“panier”物件，您應該回傳整個狀態和 newPanier 物件：return { ...state, panier: neePanier }

標籤：

上一篇：如何拆分對專案及其值使用相同分隔符的字串輸入

下一篇：用Javascript修改第n個孩子