⚛️ 기본 환경: IDE: VS code, Language: React
발생 Error
React에서 다음 Source Code를 실행할 경우,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import { useDispatch } from "react-redux";
import classes from "./CartItem.module.css";
import { cartActions } from "../../store/cart-slice";
const CartItem = (props) => {
const dispatch = useDispatch();
const { title, quantity, id, total, price } = props.item;
const removeItemHandler = () => {
dispatch(cartActions.removeItemToCart(id));
};
const addItemHandler = () => {
dispatch(cartActions.addItemToCart(id, title, price));
};
return (
<li className={classes.item}>
<header>
<h3>{title}</h3>
<div className={classes.price}>
${total.toFixed(2)}{" "}
<span className={classes.itemprice}>(${price.toFixed(2)}/item)</span>
</div>
</header>
<div className={classes.details}>
<div className={classes.quantity}>
x <span>{quantity}</span>
</div>
<div className={classes.actions}>
<button onClick={removeItemHandler}>-</button>
<button onClick={addItemHandler}>+</button>
</div>
</div>
</li>
);
};
export default CartItem;
|
|
🚨 다음과 같은 오류 발생
TypeError: Cannot read properties of undefined (reading 'toFixed')
발생 원인
addItemToCart로 전달한 action.payload값이 객체가 아닌 개별값으로 전달
action.payload = id = newItem이 되어 state 업데이트가 제대로 일어나지 않음
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
import { createSlice } from "@reduxjs/toolkit";
const cartSlice = createSlice({
name: "cart",
initialState: {
items: [],
totalQuantity: 0,
},
reducers: {
addItemToCart(state, action) {
const newItem = action.payload;
const existingItem = state.items.find((item) => item.id === newItem.id);
state.totalQuantity++;
if (!existingItem) {
state.items.push({
id: newItem.id,
price: newItem.price,
quantity: 1,
totalPrice: newItem.price,
name: newItem.title,
});
} else {
existingItem.quantity++;
existingItem.totalPrice = existingItem.totalPrice + newItem.price;
}
},
removeItemToCart(state, action) {
const id = action.payload;
const existingItem = state.items.find((item) => item.id === id);
state.totalQuantity--;
if (existingItem.quantity === 1) {
state.items = state.items.filter((item) => item.id !== id);
} else {
existingItem.quantity--;
existingItem.totalPrice = existingItem.totalPrice - existingItem.price;
}
},
},
});
export const cartActions = cartSlice.actions;
export default cartSlice;
|
|
해결 방법
{id, title, price}를 객체로 묶어서 전달
action.payload = {id, title, price} = newItem
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import { useDispatch } from "react-redux";
import classes from "./CartItem.module.css";
import { cartActions } from "../../store/cart-slice";
const CartItem = (props) => {
const dispatch = useDispatch();
const { title, quantity, id, total, price } = props.item;
const removeItemHandler = () => {
dispatch(cartActions.removeItemToCart(id));
};
const addItemHandler = () => {
dispatch(cartActions.addItemToCart({id, title, price}));
};
return (
<li className={classes.item}>
<header>
<h3>{title}</h3>
<div className={classes.price}>
${total.toFixed(2)}{" "}
<span className={classes.itemprice}>(${price.toFixed(2)}/item)</span>
</div>
</header>
<div className={classes.details}>
<div className={classes.quantity}>
x <span>{quantity}</span>
</div>
<div className={classes.actions}>
<button onClick={removeItemHandler}>-</button>
<button onClick={addItemHandler}>+</button>
</div>
</div>
</li>
);
};
export default CartItem;
|
|
참고 자료
⭐ Web Browser에서 Debugging하는 법
