React Type 必须有一个返回迭代器的'[Symbol.iterator]()'方法

Question

我在这里有一个演示

https://stackblitz.com/edit/react-ts-shopping-cart-ssofgc?file=Shop.tsx

对不起，这不是最好的问题，但

我的演示是一个使用React和Typescript的简单购物车。

产品可以从购物车中添加和移除。

我在stackblitz中的演示可以工作，但我在应用程序中使用相同的代码时出错。

在我的应用程序中，我在removeFromCart 中收到一个错误

我在这里得到错误

const removeFromCart = (
e: React.MouseEvent<HTMLInputElement, MouseEvent>,
item: IProduct
) => {
let cartCopy = [...cart]; // Error here - Type 'IProduct' must have a '[Symbol.iterator]()' method that returns an iterator.
cartCopy = cartCopy.filter(cartItem => cartItem.id !== item.id);
setCart(cartCopy);
}; 

错误为

Type 'IProduct' must have a '[Symbol.iterator]()' method that returns an iterator.

有人能解释这个错误或如何修复它吗？

Answer 1

奇怪的是，您在所说的位置出现错误，因为您没有在该行中使用item。。。我认为您的CCD_ 2类型需要是"；阵列状"；，例如，将[Symbol.iterator]()作为其中的一部分。您可以在MDN上阅读有关Symbol.iterator的更多信息。

编辑：我现在看到(在您的stackblitz链接中(cart来自const [cart, setCart] = useState([]);，所以它肯定是一个数组，所以这应该不是问题。在我看来，你的编辑器或本地项目配置都有问题。。。

也许您可以尝试更明确地说明您的变量类型。例如，items和cart看起来都是IProduct[]，所以可以将它们改为：

const [cart, setCart] = useState<IProduct[]>([]);
const items: IProduct[] = [
{
id: 1,
name: "Product One",
price: 12
},
{
id: 2,
name: "Product Two",
price: 45
},
{
id: 3,
name: "Product Three",
price: 23
}
];

Answer 2

这可能是由于tsconfig.json中的lib选项。我已经更新了一些新的软件包(Redux 7、React 16+(，并注意到我的配置严重过时。

之前：

tsconfig.json

"target": "es2015",
"lib": [ "dom", "es5", "es2015.symbol", "es2015.core", "es2015.promise" ]

此配置在使用React.useState时引发错误。

之后：

tsconfig.json

"target": "es2015",
"lib": [ "dom", "es2015" ]

具体来说，添加es2015.iterable就足以解决这个特定的错误，但在我的情况下，没有理由不添加es2015。