Это 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, и я попытался создать сайт для покупок.
Это самая странная часть. Я не получаю никакой ошибки. Просто данные не отображаются. Подожди, я сейчас создам.
с таким количеством информации будет сложно. мне в голову, я полагаю, что это, вероятно, из-за поверхностного сравнения использования реакции
Я удалил ненужный код из предыдущего, может быть, вы могли бы мне снова помочь?
было бы очень полезно, если бы вы могли сделать codeandbox, так как мне нужно больше контекста, вы можете заменить свои данные некоторыми макетами, которые работают.
Я думаю, что проблема в том, что вместо:
const [cart, setCart] = useState([] as Product[]);
Ты должен сделать:
const [cart, setCart] = useState<Product[]>([] as Product[]);
Или попробуйте:
const [cart, setCart] = useState<Product[]>([]);
Спасибо, просто нужно немного настроить, чтобы первый заработал! я ценю вашу помощь
Обновлено: вот моя разветвленная версия
Основываясь на ваших кодах и коробке, я думаю, что нашел вашу проблему.
Home.tsx
, попробуйте что-то вроде этого, обратите внимание, мы передаем ссылку на функцию setCart
. Кроме того, корзину не нужно передавать, setState
переходит в предыдущее состояние автоматически:{products.map((product, index) => (
<SingleProduct key = {index} product = {product} setCart = {setCart} />
))}
SingleProduct
вместо того, чтобы указывать типы для каждого метода, вы можете создать простой интерфейс и передать его в React.FC
, чтобы все ваши типы были выведены правильно. Кроме того, setState
имеет другую подпись, чем та, которую вы используете:interface ISingleProduct {
product: Product;
setCart: React.Dispatch<React.SetStateAction<Product[]>>;
}
export const SingleProduct: React.FC<ISingleProduct> = ({ setCart, product }) => {
...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))
}
>
Хорошо, спасибо за ваше решение. Я не знал, что можно было передать реквизит таким образом, поскольку я видел только людей, которые делали что-то вроде расширения и использовали «&». Спасибо за помощь! Я только начинаю изучать машинопись, поэтому у меня нет глубокого понимания этого. В любом случае спасибо!
если это сработало для вас, пожалуйста, проголосуйте и отметьте это как правильный ответ, спасибо: D
какую ошибку вы получаете? Кроме того, вы можете создать минимально-воспроизводимый-пример с кодами и ящиком?