Тип React typescript должен иметь метод '[Symbol.iterator] ()', который возвращает итератор

#reactjs #typescript

Вопрос:

У меня есть демонстрация здесь

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.

Кто-нибудь может объяснить эту ошибку или как ее исправить.

1. что такое тип корзины и откуда cart он берется? похоже, он не является аргументом вашей removeFromCart функции

2. Теперь я вижу (в вашей ссылке stackblitz), которая cart исходит из const [cart, setCart] = useState([]);

Ответ №1:

Странно, что вы получаете сообщение об ошибке там, где вы говорите, что вы есть, поскольку вы не используете item эту строку… Я бы подумал, что ваш cart тип должен быть «похожим на массив», т. Е.. включить [Symbol.iterator]() как его часть. Вы можете прочитать больше о Symbol.iterator в 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
    }
  ];

1. кроме, может быть, немного более явного, я действительно не вижу ничего плохого в вашем коде или использовании типов. единственное, что я мог бы предложить, это то, что вы определяете свои типы (или, в данном случае, интерфейс) вне <Shop />

Ответ №2:

Вероятно, это связано с lib опцией in tsconfig.json . Я обновился до некоторых более новых пакетов (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 .