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 ...我认为您的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
    }
  ];

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

1 个答案: