如果我包含一个州作为我的道具，则不呈现数据;React和TypeScript

Question

这是数据的useState 如果我从代码中删除了这个状态，它将显示良好

const [cart, setCart] = useState([] as Product[]);

这是映射/渲染数据的代码

<SingleProduct {...product} key={index} cart={cart} setCart={() => setCart} />

类型

export type Product = {
name: string;
price: string;
image: string;
id: string;
};
export type Cart = {
cart: Product[];
setCart: (cart: Product[]) => any;
};

export const SingleProduct = ({ cart, setCart }: Cart, { ...product }: Product) => {(
<button onClick={() => { setCart([...cart, product]);}}>
Add to Cart
</button>
<button onClick={setCart(cart.filter((item) => item.id !== product.id))}>
remove from Cart
</button>
)};

请注意，如果我删除cart和setCart函数，我的代码运行得非常好。

我已经调试这个代码一个多小时了，如果有人能帮我的话。这将是一个很大的帮助！

PS：仍在学习TypeScript，我尝试制作一个购物网站

Answer 1

编辑：这是我的分叉版本

根据你的代码沙盒，我想我已经发现了你的问题。

1. 不要在Home.tsx中传播道具，而是尝试这样的方法，注意，我们正在传递setCart函数的引用。此外，推车不需要通过，setState自动通过之前的状态：

{products.map((product, index) => (
<SingleProduct key={index} product={product} setCart={setCart} />
))}

2. 在SingleProduct中，您可以创建一个简单的接口并将其传递给React.FC，而不是为每个方法指定类型，这样您的所有类型都将被正确推断。此外，setState的签名与您使用的签名不同：

interface ISingleProduct {
product: Product;
setCart: React.Dispatch<React.SetStateAction<Product[]>>;
}
export const SingleProduct: React.FC<ISingleProduct> = ({ setCart, product }) => {

3. 点击函数可以修改如下(idk why，不知何故，您的...product变空了，可能需要更仔细地查看(：

// add to cart
<button
className="add"
onClick={() => {
setCart((prev) => [...prev, product]);
}}
>
// remove from cart
<button
className="add"
onClick={() =>
setCart((cart) => cart.filter((item) => item.id !== product.id))
}
>

Answer 2

我认为问题在于：

const [cart, setCart] = useState([] as Product[]);

你应该做：

const [cart, setCart] = useState<Product[]>([] as Product[]);

或者试试：

const [cart, setCart] = useState<Product[]>([]);