Objects are not valid as a React child (found: object with keys {id, name, image, creationAt, updatedAt}). If you meant to render a collection of children, use an array instead.

[Matilda0730]

CartItem추가하려하니까 이런일이...

[Matilda0730]

첫번째로 오류는 잡았으나 실패한 방법

CartItem 부모 객체에서 속성 내려줄때 json으로 내려주기

import { NavItem } from "react-bootstrap";
import { useSelector } from "react-redux";
import CartItem from "./CartItem";

const CartList = () => {
    const { products } = useSelector((state) => state.cart);
    return (
        <div className="cart_list">
            {products.map((product) => (
                <CartItem key={JSON.stringify(product.id)} item={JSON.stringify(product)} />
            ))}
        </div>
    );
};

export default CartList;

[Matilda0730]

두번째로 해결한 방법 일단 자고 일어나서 콘솔로그를 다시 찍어보니까 어제는 undefined가 뜨던 것들이 오늘은 멀쩡하게 item 배열을 잘 불러와줬다...왜일까 어쨌든 item을 불러올 때 특이하게 내가 고른 api 사이트는 item을 그냥 어레이로 주는게 아니라 item이라는 배열 속의 배열로 불러오게 해 줘서 item을 한번 더 찍고 들어가야 하는 것이었다. 다음과 같은 코드로 해결하였다.

import { useDispatch } from "react-redux";
import { decrementProduct, deleteFromCart, incrementProduct } from "../../features/cartSlice";
import { Link } from "react-router-dom";
import { AiOutlineDelete } from "react-icons/ai";

const CartItem = (item) => {
    const dispatch = useDispatch();

    const deleteProduct = () => {
        dispatch(deleteFromCart(item.item.id));
    };
    const incrementCount = () => {
        dispatch(incrementProduct(item.item.id));
    };
    const decrementCount = () => {
        dispatch(decrementProduct(item.item.id));
    };

    return (
        <div className="Styles.cart_item">
            <Link to={`/production/${item.item.id}`}>
                <img src={item.item.images} alt="product card" />
            </Link>
            <div className="styles.cart_description">
                <h3>{item.item.category.name}</h3>
                <h2>{item.item.title}</h2>
                <span>
                    {item.item.price} x {item.item.quantity} = $ {item.item.total.toFixed(2)}
                </span>
            </div>
            <div className="styles.cart_count">
                <div>
                    <button disabled={item.item.quantity === 1} onClick={decrementCount}>
                        -
                    </button>
                    <span>{item.item.quantity}</span>
                    <button disabled={item.item.quantity === 10} onClick={incrementCount}>
                        +
                    </button>
                </div>
            </div>

            <button onClick={deleteProduct} className="styles.cart_delete">
                <AiOutlineDelete />
            </button>
        </div>
    );
};

export default CartItem;