购物车不会实时更新 react 和 redux

Question

我尝试实时更新我的篮子，在控制台中篮子是最新的但显示有延迟。我必须再单击一次才能达到 date.And 第二个问题是当我在 table 中发送一篇文章时，对于添加的每篇文章，它都为其添加了一个索引，但在其中放置了第二个目的。你能提供一些信息吗？我从 React 和 Redux 开始。感谢您的帮助。

页面缩减器

import {
    giants,
    Fish,
    Chicken,
    Bacon,
    Dips
} from "../constantes/images/ConstImages";

import  {
    ADD_BASKET, 
    DELETE_MENU,
    ADD_QUANTITY, 
    REMOVE_QUANTITE,
    CANCEL_COMMAND
} from "../../components/action/ActionTypes";

export const initialState = {
    plats: [
        {id: 1, burger: "Giant", image: giants, prix: "4.90",},
        {id: 2, burger: "Fish", image: Fish, prix: "5.20"},
        {id: 3, burger: "chicken", image: Chicken, prix: "6.10"},
        {id: 4, burger: "bacon", image: Bacon, prix: "5.90"},
        {id: 5, burger: "dips", image: Dips, prix:"4.50"},
    ],
    panier: [],
    totalPanier:"",
    prixFinal: 0,
    quantite: 0,
}

export default function (state = initialState, action = {}) {
    
    console.log(state.panier)
    switch (action.type) {

        case ADD_BASKET :
            console.log(state.panier)
            return {
                ...state,
                panier: [...state.panier, action.plats],
                quantite:  state.quantite + 1,
                prixFinal: state.prix
            };
  
        case DELETE_MENU :
            return {
            ...state,
            panier: state.panier.filter(menu => menu.id !== action.panier.id),
        }
    
        case ADD_QUANTITY:
            
            return {
                ...state,
                panier : state.panier.map( paniers => 
                   paniers.id === action.id ?
                    {
                      ...paniers,
                       quantite : parseInt(paniers.quantite)+1,
                        prixQty: console.log(paniers.testPrixs),
                        prixFinal: parseFloat(paniers.prix * paniers.quantite).toFixed(2)
                    } :
                   paniers,
                ), 
            };
            
        case REMOVE_QUANTITE :
            return {
                ...state,
                panier : state.panier.map( paniers => 
                    paniers.id === action.id ?
                    {
                       ...paniers,
                       quantite : paniers.quantite - 1
                    } :
                    paniers,
                ),
            }

        case CANCEL_COMMAND : 
            return state = initialState

            
        default: return state
    }
}

页面美食

import React, {useEffect} from 'react';
import { Link, } from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import '../../css/Food.scss';
import Accompagnement from './Accompagnement'
import Panier from '../panier/Panier';
import { ADD_BASKET, DELETE_MENU, ADD_QUANTITY, CANCEL_COMMAND } from "../action/ActionTypes";

const Food = () => {
    const dispatch = useDispatch();
    const {plats} =useSelector(state => state)
    const {panier} =useSelector(state => state)
    const  {totalFinal}  =useSelector(state => state)
    useEffect(() => {
        console.log(totalFinal)
    })
   

    const listBurger = (
        <ul className='listBurger'>
            { 
                plats.map((plat) =>
                    <li key={plat.id}> 
                        <div className='listBurger__image'>
                            <img className='listBurger__imageBurger' src= {plat.image} alt='image burger' /> 
                        </div> 
                        <p className='listBurger__name'>{plat.burger}</p>
                        
                        <div className='listBurger__bouton'>
                            <button className='listBurger__bouton__menu' onClick={()=> add(plat)} >Ajouter</button>
                            <button className='listBurger__bouton__menu' value={plat.id} onClick={()=> removeBurger(plat)}>Annuler</button>
                           
                        </div>
                    </li>
                )
            }
        </ul>
    ) 
    const add = (plat) =>{  
        const foundItem = panier.find(it => it.id === plat.id);
        if(foundItem){
            dispatch({
                type:  ADD_QUANTITY,
                id :plat.id,
                panier: plat,
                burger : plat.burger,
                image: plat.image,
                quantite: 1,
                prixFinal: parseFloat(plat.prix * plat.quantite).toFixed(2)
            })
        }else{
            dispatch({
                type: ADD_BASKET,
                plats: 
                  {
                    id :plat.id,
                    panier: plat,
                    burger : plat.burger,
                    image: plat.image,
                    prix: plat.prix,
                    quantite: 1,
                    prixFinal: plat.prix
                } 
            }) 
        }
    }
    const removeBurger = (plat) => {
        dispatch({
            type: DELETE_MENU,
            panier: {id: plat.id}
        })
       
    }

    const cancelCommand = () =>{
        dispatch({
            type: CANCEL_COMMAND,     
        })
    }

    return(
        <div className='container_food' >
            <div className='container_food__Accompagnement'>
                <div className='rendu_Accompagnement'>
                    <h2>Burger</h2>
                    {listBurger}
                </div>
                <div>
                    <Accompagnement />
                </div>
            </div>
            <div className='container_food__panier'>    
                    <Panier />
                <div className='total'>
                    <div>
                        {/* {panier.map((paniers) =>
                            <p>Prix total : { paniers.prixFinal }</p>
                        )} */}  
                    </div>
                    <div className='container_panier-btn'>
                        <Link className={"menu__navigation"} to={"/"}>
                            <button className='container_panier-button' onClick={cancelCommand}>Annuler</button>
                        </Link>
                        <Link to={"/boisson"}>
                            <button className='container_panier-button'>Suivant</button>
                        </Link>
                    </div>
                </div>
                
            </div>
        </div>
    )
}

export default Food;

页面篮

import React, {useEffect, useState} from 'react';
import { Link, } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux';
import "../../css/Panier.scss"
import { 
    ADD_QUANTITY, 
    REMOVE_QUANTITE, 
    DELETE_MENU  
} from "../action/ActionTypes"

const Panier = () =>{
    const [totoBasket, setTotoBasket ] = useState(0)
    const dispatch = useDispatch();
    const  { panier }   = useSelector(state => state)
    
    
    const  {totalFinal}  =useSelector(state => state)
        useEffect(() => {
            console.log(totalFinal)
        })
    const Add = (item) =>{
        setTotoBasket(item.prix)
        dispatch({
            type:  ADD_QUANTITY,
            id:item.id,
        })
    }

    const removeQuantite = (item) => {
        const itemQuantite = item.quantite
        if(itemQuantite > 1){
            dispatch({
                type: REMOVE_QUANTITE,
                id: item.id,
   
            })
        }else{
            dispatch({
                type: DELETE_MENU ,  
                panier: {id: item.id} 
            })
        }
    }
   
    return (
        <div className='container_panier'>
            <div>
                <div className='header_panier'>
                    <h2 className='header_panier__h2'>Panier</h2>
                </div>
                <div>
                    <h3>MA COMMANDE</h3>
                </div>
                <div className='container_command'>
                {panier.map((paniers) => 
                    <ul className='listBurgerPanier' 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'>{ parseFloat(paniers.prix * paniers.quantite).toFixed(2) } €</li>
                            <div className='panier-text-btn'>
                                <button className='panier-text__btnFinal' onClick={()=>Add(paniers)} >+</button> 
                                <li className='panier-text_menu'>{ paniers.quantite}</li>
                                {
                                    (paniers.quantite > 0)
                                    ? <button className='panier-text__btnFinal' disabled={false} onClick={()=> removeQuantite(paniers)}>-</button>
                                    : <button className='panier-text__btnFinal' disabled={true} onClick={()=> removeQuantite(paniers)}>-</button>
                                } 
                            </div>
                        </div>

                    </ul>     
                )}
                </div>
            </div>
        </div>
    )  
}

export default Panier;

Answer 1

尝试这样的事情：

在 Page Basket 中使用 useEffect 和 dispatch 来获取更新后的状态

const order = useSelector(state => state)
    useEffect(() => {
       dispatch({
                type:  GET_ORDER,
                id:item.id,
            })
      }, []);

在页面缩减器中

case GET_ORDER :
        return state

购物车不会实时更新 react 和 redux

The cart does not update in real time react and redux

javascript

reactjs

redux