React typescript - 类型必须有一个返回迭代器的“[Symbol.iterator]()”方法答案

【问题标题】：React typescript - Type must have a '[Symbol.iterator]()' method that returns an iteratorReact typescript - 类型必须有一个返回迭代器的“[Symbol.iterator]()”方法
【发布时间】：2020-11-11 07:15:00
【问题描述】：

我这里有一个演示

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.

谁能解释这个错误或如何解决它。

【问题讨论】：

什么是购物车类型，cart 来自哪里？它似乎不是您的 removeFromCart 函数的参数
我现在看到（在你的 stackblitz 链接中）cart 来自 const [cart, setCart] = useState([]);

标签： reactjs typescript

【解决方案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
    }
  ];

【讨论】：

除了可能更明确一点之外，我真的看不出您的代码或您对类型的使用有什么问题。我可能建议的唯一另一件事是您在 <Shop /> 之外定义您的类型（或在这种情况下为接口）

【解决方案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。

【讨论】：