Javascript TypeError:setCartCount不是函数-React-Hooks-Redux
我正在我的电子商务项目中设置和实施redux,目前我正在尝试设置redux,以便UI更新我创建的BasketBadge,以便在商品添加到购物车时显示购物车中的商品数量 我正在使用redux和react钩子来实现这一点,但是由于某种原因,我在使用钩子时遇到了一个以前没有遇到过的错误:“TypeError:setCartCount不是一个函数” 我在实现addToCart功能时也遇到了类似的错误,但该问题的解决方法不适用于此问题 代码如下>Javascript TypeError:setCartCount不是函数-React-Hooks-Redux,javascript,reactjs,redux,react-redux,react-hooks,Javascript,Reactjs,Redux,React Redux,React Hooks,我正在我的电子商务项目中设置和实施redux,目前我正在尝试设置redux,以便UI更新我创建的BasketBadge,以便在商品添加到购物车时显示购物车中的商品数量 我正在使用redux和react钩子来实现这一点,但是由于某种原因,我在使用钩子时遇到了一个以前没有遇到过的错误:“TypeError:setCartCount不是一个函数” 我在实现addToCart功能时也遇到了类似的错误,但该问题的解决方法不适用于此问题 代码如下> import React, {useState, useE
import React, {useState, useEffect} from 'react';
import 'antd/dist/antd.css';
import { Avatar, Badge } from 'antd';
import { ShoppingCartOutlined, UserOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
const BasketBadge = ({cart}) => {
const {cartCount, setCartCount} = useState(0);
useEffect(() => {
let count = 0;
//loop through cart array
// counts all of qty of each item added to populate count
cart.forEach((item) => {
count += item.qty;
});
//once loop is done we set cartCount to new value of count
setCartCount(count);
},[cart, cartCount]);
return(
<div>
<span className="avatar-item">
<Badge count={cartCount}>
<Avatar shape="circle" icon={<ShoppingCartOutlined />} />
</Badge>
</span>
</div>
)
}
const mapStateToProps = (state) => {
return{
cart: state.shop.cart,
}
}
export default connect(mapStateToProps)(BasketBadge);
import React,{useState,useffect}来自“React”;
导入“antd/dist/antd.css”;
从“antd”导入{Avatar,Badge};
从“@ant design/icons”导入{ShoppingCartOutlined,UserOutlined};
从'react redux'导入{connect};
const BasketBadge=({cart})=>{
const{cartCount,setCartCount}=useState(0);
useffect(()=>{
让计数=0;
//循环购物车阵列
//统计添加到填充计数的每个项目的所有数量
cart.forEach((项目)=>{
计数+=项目数量;
});
//循环完成后,我们将cartCount设置为count的新值
setCartCount(计数);
},[cart,cartCount]);
返回(
)
}
常量mapStateToProps=(状态)=>{
返回{
购物车:state.shop.cart,
}
}
导出默认连接(mapStateToProps)(BasketBadge);
而不是:
const {cartCount, setCartCount} = useState(0);
你应该:
const [cartCount, setCartCount] = useState(0);
应该使用语法。它允许我们为通过调用
useState
声明的状态变量指定不同的名称。这些名称不是useState
API的一部分。噢,哇,我怎么会错过这个!谢谢你的帮助!