【发布时间】：2022-01-08 22:30:04
【问题描述】：
我尝试实时更新我的购物篮，在控制台中购物篮是最新的，但显示有延迟。我必须再单击一次才能使其更新。第二个问题是当我在表格中发送一篇文章时，对于添加的每篇文章，它都为其添加一个索引，但在其中放置了第二个对象。你能提供一些信息吗？我从 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;
【问题讨论】：
-
您需要更具体地说明什么对您不起作用。将问题分解为一个最小的示例。例如，foreach 问题应该是一个自己的问题。问题应该包括“输入”、“代码”和“预期输出”.. 例如这是我的数组：[1,2,3] 我做了一个地图（x => x）我希望 x 是 x *2 但我的问题是我得到 x
-
嗨@StefanAvramovic 谢谢你的回复，我会尽量解释清楚，当我添加时我增加了购物车页面中的项目数量，控制台有延迟页面级缩减器。与实际数量相比，缺少添加的数量。购物篮页面上显示的数量级别的价格：
- {parseFloat (basiers.prix * basiers.quantite) .toFixed (2 )} €
与位于以下级别的食物页面上的最终金额不符：总价：{basiers.prixFinal}
-
尝试在返回状态的地方添加一个分派（GET_STATE），然后在 Page Basket 运行分派 GET_STATE 状态应该被更新..然后你应该能够使用 useSelector(state => state) 来获取状态..
标签： javascript reactjs redux