해결된 질문
23.03.24 21:13 작성
·
371
0
안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.
그런데 자꾸 문제가 생기네요,,
첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,
이모션 부분은 제외하고 전달드립니다ㅜ
import styled from "@emotion/styled";
import { Modal } from "antd";
interface IBasketsProps {
id: number;
writer: string;
product: string;
price: number;
}
const myBasket = [
{ id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 },
{ id: 200, writer: "철수", product: "과외", price: 40000 },
{ id: 300, writer: "훈이", product: "도시락", price: 50000 },
{ id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 },
];
export default function BasketHomework() {
const onClickBtn = (basket: IBasketsProps) => () => {
const baskets: IBasketsProps[] = JSON.parse(
localStorage.getItem("baskets") ?? "[]"
);
console.log(baskets);
const alreadyIn = baskets.filter((el) => el.id === basket.id);
if (alreadyIn.length === 1) {
Modal.warning({ content: "이미 찜한 상품입니다." });
return;
}
baskets.push(basket);
localStorage.setItem("baskets", JSON.stringify(basket));
};
return (
<>
<CardWrapper>
{myBasket.map((el, index) => (
<Card key={index}>
<Product>{el.product}</Product>
<Writer>{el.writer}</Writer>
<Price>{el.price}</Price>
<button onClick={onClickBtn(el)}>장바구니 담기</button>
</Card>
))}
</CardWrapper>
</>
);
}
답변 2