在电子商务网站上的redux工具包中，当我将产品添加到购物车时，总价从0变为null。我一直在努力解决这个问题。它应该通过添加产品价格来显示购物车的总价格，而不是null
这是redux工具包中电子商务网站的Cart切片
import { createSlice } from "@reduxjs/toolkit";
const cartSlice = createSlice({
name: "cart",
initialState: {
products: [],
quantity: 0,
total: 0,
},
reducers: {
addProduct: (state, action) => {
state.products.push(action.payload);
state.quantity += 1;
state.total += action.payload.price * action.payload.quantity;
},
removeProduct: (state, action) => {
let index = state.products.indexOf(action.payload)
state.quantity -= action.payload
state.products.splice(index, 1)
}
},
});
export const { addProduct ,removeProduct} = cartSlice.actions;
export default cartSlice.reducer;
这是一个电子商务网站的产品页面。最后一个功能const addtocart=()=>{dispatch(addProduct({...product,quantity}))}将产品添加到购物车。
import React, { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import {useDispatch, useSelector} from "react-redux"
import { addProduct } from '../ReduxToolkit/features/cartSlice'
const ProductPage = () => {
const quantity = useSelector((state) => state.cart.quantity)
const dispatch=useDispatch()
const { id } = useParams("")
const [product, setProduct] = useState([])
useEffect(() => {
const getData = async () => {
const res = await fetch(`/products/oneproduct/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
const data = await res.json()
if (res.status !== 200) {
console.log("no data present")
} else {
setProduct(data)
}
}
getData()
}, [id])
const addtocart=()=>{dispatch(addProduct({...product,quantity}))}
return (
<div>
<section className="text-gray-600 body-font font-abc overflow-hidden">
<div className="container px-5 py-16 mx-auto">
<div className="lg:w-4/5 mx-auto flex align-middle justify-center flex-wrap">
<img alt="ecommerce" className="lg:w-1/3 w-[230px] object-contain lg:h-96 md:h-76 rounded" src={product.oneProduct?.img} />
<div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 className="text-sm title-font font-semibold text-gray-500 my-2 tracking-widest">{product.oneProduct?.cat}</h2>
<h1 className="text-gray-900 text-3xl my-4 title-font font-bold mb-1">{product.oneProduct?.title}</h1>
<p className="leading-relaxed">{product.oneProduct?.desc}</p>
<div className="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div className="flex ml-6 items-center">
</div>
</div>
<div className="flex">
<span className="title-font font-medium text-2xl text-gray-900">$ {product.oneProduct?.price}</span>
<button className=" cart flex ml-4 text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none lg:w-32 hover:bg-indigo-600 rounded md:w-4 md:px-6 text-sm" onClick={addtocart}>Add to cart</button>
<Link to="/cart">
<button className=" cart flex ml-4 text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none lg:w-32 hover:bg-indigo-600 rounded md:w-4 md:px-6 text-sm">Order page
</button>
</Link>
</div>
</div>
</div>
</div>
</section>
</div>
)
}
export default ProductPage
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
- 检查从fetch调用获取的数据
- 对照您的redux状态检查您的本地状态
- 查看您的调用堆栈和Redux开发工具
- 硬代码状态值，直到您可以使其工作为止-请记住，redux会在每次fetch调用时返回200个响应，即使是失败的调用，也要使用originalStatus而不是status进行响应检查
我第一次指出你为什么会为空，首先是指向oneProduct的可选链接，说它不存在和/或你的价格在这条线上为空
{product.oneProduct?.price}是否可能在第一次渲染时还不存在oneProduct？因为它读取的是useState本地值，而不是redux状态？
这里有一个我如何得到总价的例子，你也可以用这个概念来得到产品的单一价格我会把这个放在cartSliceexport const selectCurrentTotal = (state) => state.total;中
然后在产品页面中导入selectCurrentTotal，如下所示import { selectCurrentTotal } from '../features/cart/cartSlice';并像这样使用const total = useSelector(selectCurrentTotal);现在我们可以用total代替{product.oneProduct?.price}
您应该使用useSelector从redux状态中抓取产品，就像处理数量一样。试着对oneProduct进行硬编码，看看这是否是问题所在。我不会将redux中所需的任何状态值存储在本地useState中，这只是我自己的偏好。
我建议删除useEffect，您的cartService.js应该处理所有的fetch调用(构建器突变(，然后您在cartSlice中的reducers处理操作和状态更新。fetch调用应该有trycatch，以帮助保持干净和无错误。https://redux-toolkit.js.org/usage/usage-guide#asynchronous-逻辑和数据提取
你的调用堆栈说什么？Redux开发工具是否显示添加到您所在州的所有或任何产品的价格更新？