[해결 방법] TypeError: Cannot read properties of undefined (reading 'toFixed')

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

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 업데이트가 제대로 일어나지 않음

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

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하는 법