React Typescript-类型必须具有返回迭代器的'[Symbol.iterator]'方法

如何解决React Typescript-类型必须具有返回迭代器的'[Symbol.iterator]'方法

我在这里有一个演示

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.

任何人都可以解释此错误或如何解决。

解决方法

奇怪的是，您得到的错误是您所说的，因为您未在该行上使用item ...我认为您的cart类型需要为“数组喜欢”，即。将[Symbol.iterator]()包括在内。您可以阅读有关Symbol.iterator on MDN的更多信息。

编辑：我现在（在您的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
    }
  ];