react-redux 相关问题

React OnClick 事件行为是意外的

产品卡 函数 ProductCard ({图像, 名称, 统计信息, id}){ 让调度 = useDispatch() 让数量 = 1 返回 （ <> 产品卡 function ProductCard ({image, name, stats, id}){ let dispatch = useDispatch() let quantity = 1 return ( <> <div className="product-card"> <div className="product-image-wrapper"> <img src={image} alt="" /> </div> <div className="image-metadata"> <div className="data-wrapper"> <div className="product-details"> <div className="product-category">{stats.category}</div> <div className="product-name">{name}</div> </div> <div className="action-btn-wrapper"> <div className="add-to-cart" onClick={()=>{ dispatch(addToCart({name,image,stats,id,quantity})) } }> <img src={addToCartIcon} alt="" /> </div> </div> </div> </div> </div> </> ) } CART 组件 import React, { useEffect } from "react"; import Header from "../components/header"; import Footer from "../components/footer"; import Checkout from "../components/checkout"; import { useSelector } from "react-redux"; function Cart (){ let cartCount = useSelector(state => state.cart.cart) useEffect(()=>{ document.title = `TRAX- Cart(${cartCount.length} Items)` },[cartCount]) return ( <> <Header/> <Checkout/> <Footer/> </> ) } export default Cart; 结帐组件 import React from "react"; import cartImage from '../assets/website-icons/9026048_shopping_cart_simple_icon.svg' import productImage from '../assets/featured/chair-model.jpg' import arabicImage from '../assets/featured/arabic-model.jpg' import { useSelector } from "react-redux"; import CartItem from "../widgets/cartItem"; function Checkout(){ let cartCount = useSelector(state => state.cart.cart) return ( <div className="cart-wrapper"> <div className="cart-page-icon"> <div className="icon-container"> <img src= {cartImage} alt="Shopping Cart Icon" /> {/* CART */} </div> </div> <div className="mini-slogan-wrapper"> Shop for upto $200 to enjoy<span>FREE SHIPPING</span>. </div> <div className="cart-table-content"> <div className="cart-table"> <div className="table-cell header-cell"> <div className="table-col-1">Product</div> <div className="table-col-2">Quantity</div> <div className="table-col-3">Price</div> <div className="table-col-4">Subtotal</div> </div> { cartCount.map(({name,image,stats,id,quantity}) => { return <CartItem id={id} productImage={image} quantity={quantity} productStats={{category : stats.category, color : stats.color}} productName={name}/> }) } {/* <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color: Red, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$300</div> <div className="table-col-4">$300</div> </div> <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={arabicImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Arabic Scarf - Embroidery Print</div> <div className="product-extras">Color: Mehroon, Size : Standard, Fabric : Linen</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$120</div> <div className="table-col-4">$120</div> </div> */} </div> <div className="checkout-container"> <div className="checkout-heading"> Cart Summary </div> <div className="selection-group"> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-ball"></div> </div> <div className="selection-value">Regular Shipping</div> <div className="selection-cost">$12.00</div> </div> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-balls"></div> </div> <div className="selection-value">Express Shipping</div> <div className="selection-cost">20.00</div> </div> </div> <div className="checkout-secondary-row" id="checkout-subtotal"> <div className="heading-secondary-row">Subtotal</div> <div className="cost-secondary-row">$420</div> </div> <div className="checkout-secondary-row" id="checkout-tax"> <div className="heading-secondary-row">Tax</div> <div className="cost-secondary-row">$10</div> </div> <div className="checkout-total" id="checkout-total" > <div className="heading-total">Total</div> <div className="cost-total">$430</div> </div> <div className="checkout-btn">Checkout</div> </div> </div> </div> ) } export default Checkout; 购物车商品组件 import React from "react"; import decrementor from '../assets/website-icons/decrementor.svg' import incrementor from '../assets/website-icons/incrementor.svg' import { useDispatch } from "react-redux"; import { removeFromCart,incrementQty,decrementQty } from "../state-manager/Slices/cartSlice"; function CartItem ({productImage,productName, productStats,id,quantity}){ let dispatch = useDispatch() return ( <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color:{productStats.color}, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn" onClick={()=>{ dispatch(removeFromCart({productImage,productName,productStats,id})) }}>Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor" onClick={()=>{ dispatch(decrementQty({id})) }}> <img src={decrementor} alt="" /> </div> <div className="quantity-value">{quantity}</div> <div className="incrementor" onClick={()=>{ dispatch(incrementQty({id})) }}> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">${300}</div> <div className="table-col-4">${quantity * 300}</div> </div> ) } export default CartItem; 卡片切片 import { createSlice } from "@reduxjs/toolkit" let CartSlice = createSlice({ name : 'Cart', initialState : { cart : [], checkoutTotal : 0 }, reducers : { addToCart : (state,action)=>{ if(state.cart.length < 1){ state.cart = [...state.cart, action.payload] }else { state.cart.map(item => { if(item.id == action.payload.id){ item.quantity++; }else { state.cart = [...state.cart, action.payload] } }) } }, removeFromCart : (state,action)=>{ state.cart.map((item, index, cartItemArray) =>{ if(item.id == action.payload.id){ let rar = cartItemArray.splice(index,1) console.log(rar) } }) }, incrementQty : (state,action)=>{ state.cart.map(item =>{ console.log(action.payload) if(item.id == action.payload.id){ item.quantity = item.quantity + 1 } }) }, decrementQty : (state,action)=>{ state.cart.map(item =>{ if(item.id == action.payload.id){ if(item.quantity > 0){ item.quantity = item.quantity - 1 }else { console.log('its already nulled out') } } }) } } }) export default CartSlice.reducer export const {addToCart,removeFromCart, incrementQty,decrementQty} = CartSlice.actions 我正在使用 redux 进行状态管理，每当我添加到购物车时，第三次单击时，购物车计数开始加倍，例如从 2 到 4，从 4 到 6 等等，我已经尝试了很多，但我不能我的头围绕着它。请让我知道我做错了什么？ 发生这种情况是因为您循环遍历购物车中的所有商品，并且对于每个商品，您将整个购物车附加到 cart 中。 您需要做的是将现有商品替换为相同商品但数量不同。像这样的东西： state.cart.map(item => item.id == action.payload.id ? {...item, quantity: item.quantity + 1 } : item); 我无法测试代码，但我希望它至少能帮助您找出问题。 如果这有帮助，请告诉我。

使用 React Router 中的 CreateBrowserRouter 和 Redux 存储

尝试在react博客项目中实现redux和react router，其中我从api获取数据并存储在redux中；但是，它没有被渲染，也没有给出错误 我尝试了以下...

Next.js Redux 无法向 Nav.tsx 添加另一个链接

A 使用 npx create-next-app --example with-redux my-app 启动了一个新应用程序，并尝试通过添加新文件夹（aboutme）和 page.tsx 文件来创建新组件，然后添加到我的Nav.tsx...

使用 TS 的 Redux DevTools 扩展出现错误：“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在。”？

我的index.tsx 上收到此错误。 类型“Window”上不存在属性“REDUX_DEVTOOLS_EXTENSION_COMPOSE”。 这是我的 index.tsx 代码： 从 'react' 导入 * as React； 导入 * 作为 Reac...

为什么有时无法调用 fetch API？

在组件的构造函数类中，我对数据库进行 fetch 调用以获取一些数据。这是我的构造函数： 构造函数（道具）{ 超级（道具） if (props.auth === false) { ...

网络请求失败错误React Native，使用Flask Python作为后端

使用邮递员，后端似乎正在获取正确的数据，但是当我将其放入提取中时，组件不会重新渲染状态，并且还会给我一个网络请求的黄色错误...

react/redux中的formData在expressjs中返回未定义的req.params.id

我有一个多部分表单，我正在使用 formData 通过“PUT”请求发送数据。我收到错误 Cast to objectId failed for value 'undefined' (type string) at path '_id' for model 'Bl...

带有 useSelector 和 useDispatch 的 Redux Hooks - 为什么要使用这个？

我刚刚转换了一个 React 组件，该组件有一个单独的“容器”文件，其中包含 mapStateToProps / mapDispatchToProps 连接包装器实现。 现在我的 GUI 组件是 mi...

在 next.js 中哪个路由器最适合我？

我两年前用Django开发了一个网站，现在我想更新我的网站。我将使用 Next.js 更新前端并保留 Django 后端。而且我还想使用 Redux 进行状态管理...

Material-ui 多个小吃栏

我正在尝试使用 Material ui 的 Snackbar 获得多个警告，到目前为止他们还没有成功，我看到了一些 Vue 的例子，但没有反应，有人可以帮助我吗？按照我的代码...

[REACT]Material-ui 多个小吃栏

我正在尝试使用 Material ui 的 Snackbar 获得多个警告，到目前为止他们还没有成功，我看到了一些 Vue 的例子，但没有反应，有人可以帮助我吗？按照我的代码...

react-mock-store：类型错误：中间件不是函数

我正在将 jest 与 React 和 TypeScript 结合使用。 从“redux-mock-store”导入configureStore； 从“redux-thunk”导入 thunk； const mockStore = configureStore([thunk]); 它（“

当用户不断滚动时，停止多次调用函数

我有这个应用程序，当用户到达屏幕底部附近时，将从无限滚动方法中的 API 获取新内容。 但如果该用户滚动太快或只是保持滚动...

从 Redux 更改为 Redux Toolkit

我是 React 新手，正在尝试通过编码来学习。 我需要一些代码方面的帮助/建议，将此 Redux 存储转换为 Redux Toolkit。这里我使用一个名为configureStore 的函数。我什么...

Next.js 14 Redux 5 - TypeError：store.getState 不是函数

我收到此错误如何解决。我做错了什么 ？ Next.js 14 在此输入图像描述 谢谢 >！ /store/index.js 从'@reduxjs/toolkit'导入{configureStore} 进口购物车减速机...

每次使用 React Router 导航到 Redux 组件时，如何阻止状态存储数据在 Redux 组件中累积

好吧，需要注意的是我对 redux 非常陌生。我正在做一门关于 atm 的课程，我正在尝试稍微跳出框框，使用 wordpress API 和 Redu 生成一个相当标准的网站...

在 redux 工具包中将一个切片状态设置为另一个切片状态。 （本机反应）

我的 redux 工具包商店中有两个切片： 根任务： 类型 RootMissionStoreType = { 键：字符串； 标题：字符串； 任务：记录； }; 类型

Redux 查询多个createApi 和reducerPath 并重新获取

我的应用程序必须从 3 个不同的服务器获取数据，它们都连接到同一个数据库。因此，我将代码分成 3 个不同的 createAPI 并使用不同的减速器路径，但是，它

ReactJs中根据动态路径加载图片

我正在尝试在我正在制作的购物车中显示图像，但它没有显示。我必须导入每个图像吗？我知道我的路径很好，因为它以前有效。我认为可能有一些东西......

State.something.push() 在react-redux 中不起作用

我是react-redux新手，无法确定错误到底是什么。我得到的错误是 state.lectures.push 不是一个函数，但数据被发送到服务器和数据库，我......