Данные не отображаются, если я включаю состояние в качестве реквизита; Реагировать и TypeScript

Это useState для данныхесли я уберу это состояние из кода, оно будет отображаться нормально.

const [cart, setCart] = useState([] as Product[]);

Это код для отображения/рендеринга данных

<SingleProduct {...product} key = {index} cart = {cart} setCart = {() => setCart} />

Типы

export type Product = {
  name: string;
  price: string;
  image: string;
  id: string;
};

export type Cart = {
  cart: Product[];
  setCart: (cart: Product[]) => any;
};

export const SingleProduct = ({ cart, setCart }: Cart, { ...product }: Product) => {(
      <button onClick = {() => { setCart([...cart, product]);}}>
          Add to Cart
      </button>
      <button onClick = {setCart(cart.filter((item) => item.id !== product.id))}>
         remove from Cart
      </button>
  )};

Note that if I remove the cart and setCart function, my code works perfectly fine.

Я отлаживаю этот код уже более часа, если кто-то может мне помочь. Это было бы большим подспорьем!

PS: все еще изучаю TypeScript, и я попытался создать сайт для покупок.

какую ошибку вы получаете? Кроме того, вы можете создать минимально-воспроизводимый-пример с кодами и ящиком?

boxdox 08.04.2022 13:57

Это самая странная часть. Я не получаю никакой ошибки. Просто данные не отображаются. Подожди, я сейчас создам.

myonkun 08.04.2022 13:58

с таким количеством информации будет сложно. мне в голову, я полагаю, что это, вероятно, из-за поверхностного сравнения использования реакции

boxdox 08.04.2022 14:01

Я удалил ненужный код из предыдущего, может быть, вы могли бы мне снова помочь?

myonkun 08.04.2022 14:12

было бы очень полезно, если бы вы могли сделать codeandbox, так как мне нужно больше контекста, вы можете заменить свои данные некоторыми макетами, которые работают.

boxdox 08.04.2022 14:15
codeandbox.io/s/cranky-cannon-3m6exm?file=/src/index.tsx Здравствуйте, сэр, я создал codeandbox.
myonkun 08.04.2022 14:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
6
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, что проблема в том, что вместо:

const [cart, setCart] = useState([] as Product[]);

Ты должен сделать:

const [cart, setCart] = useState<Product[]>([] as Product[]);

Или попробуйте:

const [cart, setCart] = useState<Product[]>([]);

Спасибо, просто нужно немного настроить, чтобы первый заработал! я ценю вашу помощь

myonkun 09.04.2022 02:00
Ответ принят как подходящий

Обновлено: вот моя разветвленная версия

Основываясь на ваших кодах и коробке, я думаю, что нашел вашу проблему.

  1. Вместо того, чтобы распространять реквизит в Home.tsx, попробуйте что-то вроде этого, обратите внимание, мы передаем ссылку на функцию setCart. Кроме того, корзину не нужно передавать, setState переходит в предыдущее состояние автоматически:
{products.map((product, index) => (
   <SingleProduct key = {index} product = {product} setCart = {setCart} />
))}
  1. В вашем SingleProduct вместо того, чтобы указывать типы для каждого метода, вы можете создать простой интерфейс и передать его в React.FC, чтобы все ваши типы были выведены правильно. Кроме того, setState имеет другую подпись, чем та, которую вы используете:
interface ISingleProduct {
  product: Product;
  setCart: React.Dispatch<React.SetStateAction<Product[]>>;
}

export const SingleProduct: React.FC<ISingleProduct> = ({ setCart, product }) => {
  1. Функции щелчка можно изменить следующим образом (почему-то ваш ...product оказался пустым, возможно, нужно присмотреться):
// add to cart
<button
  className = "add"
  onClick = {() => {
    setCart((prev) => [...prev, product]);
  }}
>

// remove from cart
<button
  className = "add"
  onClick = {() =>
    setCart((cart) => cart.filter((item) => item.id !== product.id))
  }
>

Хорошо, спасибо за ваше решение. Я не знал, что можно было передать реквизит таким образом, поскольку я видел только людей, которые делали что-то вроде расширения и использовали «&». Спасибо за помощь! Я только начинаю изучать машинопись, поэтому у меня нет глубокого понимания этого. В любом случае спасибо!

myonkun 09.04.2022 01:57

если это сработало для вас, пожалуйста, проголосуйте и отметьте это как правильный ответ, спасибо: D

boxdox 09.04.2022 08:23

Другие вопросы по теме

Передача vscode во внешние функции
Firebase: Почему мой код использует только первый документ в моей коллекции?
Реагировать на ошибку машинописного текста - элемент неявно имеет любой тип, потому что выражение строки типа не может использоваться для индексирования типа {}
Как получить доступ к вложенным необязательным индексам из интерфейса
Почему машинописный текст не может контекстуально вывести эти типы промежуточного программного обеспечения
Передать конструктор класса как функцию в другом классе
React & clsx: добавьте имя класса, если текущий элемент в сопоставленном массиве является первым из нескольких элементов
Свойство «MathFun» отсутствует в типе «(x?: число, y?: число) => число», но требуется в типе «Func»
Получение строки типа не может быть назначено строке типа для компонента TS в сборнике рассказов
Как ввести useState для файлов?