TypeError:setCartCount不是一个函数-React Hooks-Redux

Question

我正在我的电子商务项目中设置和实现redux，目前我正在尝试设置它，以便UI更新我创建的BasketBadge，以便在将项目添加到购物车时显示购物车中的项目数。

我使用redux和react钩子来实现这一点，但由于某种原因，我在使用钩子时遇到了一个以前从未遇到过的错误："；TypeError:setCartCount不是一个函数；。

当我实现addToCart功能时，我也遇到了类似的错误，但该问题的解决方法不适用于此问题。

代码低于>

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);

Answer 1

代替：

const {cartCount, setCartCount} = useState(0);

你应该有：

const [cartCount, setCartCount] = useState(0);

应该使用数组析构函数语法。它允许我们为通过调用useState声明的状态变量指定不同的名称。这些名称不是useStateAPI的一部分。