도와주세욧..!!!

[조윤빈]

개인적으로 키오스크 프로젝트를 하고 있습니당ㅠㅠ

메뉴들의 개별 개수들이 업데이트 될 때 마다 onCreate라는 함수를 호출해 선택된 메뉴들이 담긴 배열에
저장하려고 하는데요,, 아래 사진 처럼 개수를 추가하려고 하면 이런식으로 되는데 어떻게 하면 제대로 작동
되게 할 수 있을까요,,,
menuAmount를 redux를 사용해서 관리를 해보려고 하는데 redux는 전역적으로 상태를 관리한다고 해서
 전체 메뉴가 동시에 개별 개수가 변화할 것 같아 사용하지 않았습니다ㅠㅠ

무엇이 문제인지 알려주세요ㅜㅜㅜ

Main.js

import React, { useState, useRef ,useEffect} from 'react';
import {Routes,Route,Link} from 'react-router-dom';
import {useSelector,useDispatch} from "react-redux";
import {plusPrice,minusPrice,plusAmount,minusAmount,resetAmount,resetPrice,addMenus,removeMenus,resetMenus} from "./store.js";
import Menu from './Menu';
import MenuList from './MenuList';
import './App2.css';

function Main(){

    let store = useSelector((state) => state);
    let dispatch = useDispatch();

//    const [checkedMenus,setCheckedMenus] = useState([
    
//    ]); // 선택된 메뉴들이 저장되는 배열

   const nextId = useRef(1); // 선택된 메뉴들의 id는 1부터 시작

   const onCreate = (menuImage, menuName, menuPrice,menuAmount) => {
    const checkedmenu = {
        id:nextId.current,
        menuImage,
        menuName,
        menuPrice,
        menuAmount
   }
//    setCheckedMenus([...checkedMenus,checkedmenu])
   dispatch(addMenus(checkedmenu));
   nextId.current += 1;
   dispatch(plusAmount());
   dispatch(plusPrice(parseInt(menuPrice)));
//    console.log(store.checkedMenus[0].menuAmount)
   }

   const onRemove = (id,menuPrice,menuAmount) =>{
    console.log(store.checkedMenus.menuName);
    nextId.current -= 1;
    // dispatch(store.checkedMenus.filter(checkedmenu => checkedmenu.id !== id));
    dispatch(removeMenus(id));
    dispatch(minusAmount());
    // store.orderPrice -= parseInt(menuPrice)*menuAmount;
    dispatch(minusPrice(parseInt(menuPrice)*menuAmount));
   }
   
   const Plus = (menuPrice) =>{
        dispatch(plusPrice(parseInt(menuPrice)));
   }

   const Minus = (menuPrice) =>{
        // setOrderPrice(orderPrice -parseInt(menuPrice));
        dispatch(minusPrice(parseInt(menuPrice)));
   }

   useEffect(() => {
    // orderPrice 상태가 변경된 후 실행되는 로직을 이곳에 작성
    console.log('orderPrice가 업데이트되었습니다:', store.orderPrice);
  }, [store.orderPrice]); // store.orderPrice가 변경될 때만 실행

    return(
        <>
        <nav className="nav_top">
<div className="nav_logo">
    < img src="logo.png" alt="스마트정보통신공학과 로고"></img>
    스마트정보통신공학과
</div>

<p>주문 번호: 1번</p>
</nav>

<Menu
onCreate={onCreate}
onRemove={onRemove}
/>

<div className="checked_menu_line">
<p>선택한 메뉴</p>
</div>

<MenuList checkedMenus={store.checkedMenus} onRemove={onRemove} onCreate={onCreate} Plus={Plus} Minus={Minus}/>

<div className="order_line">
<p id="order_amount">
    <span>주문 수량</span>
    <span>{store.orderAmount}</span>
</p>
<p id="order_price">
    <span>주문 금액</span>
    <span>{store.orderPrice} 원</span>
</p>

</div>

<div className="bottom_line">
<button id="all_cancel_btn" onClick={()=>{
    dispatch(resetMenus());
    // setOrderAmount(0);
    // setOrderPrice(0);
    dispatch(resetAmount());
    dispatch(resetPrice());
}}>전체 취소</button>

<Link to="/kiosk2"><button id="payment_btn">결제 하기</button></Link>
</div>
</>
    )
}
export default Main;

MenuList.js

import { toBeEmpty } from '@testing-library/jest-dom/matchers';
import React from 'react';
import { useState, useRef } from 'react';

function Menu({checkedmenu,onRemove,Plus,Minus,onCreate}){
    let [menuAmount,setMenuAmount] = useState(1);
    //각 메뉴 개수 +,-
    // 1 이하로는 안내려갑니다.

    return( 
            
        <li style={{display:'block'}}>
            < img src={checkedmenu.menuImage} alt={checkedmenu.menuName}></img>
            <button className="cancel_btn" onClick={()=>onRemove(checkedmenu.id,checkedmenu.menuPrice,menuAmount)}>X</button>
            <p id="amount_btn">
            <button onClick = {()=>{
                if(menuAmount <= 1){
                    setMenuAmount(1);
                    onCreate(menuAmount)
                }
                else{
                    setMenuAmount(menuAmount - 1);
                    Minus(checkedmenu.menuPrice);
                    onCreate(menuAmount);
                }
                }}>-</button>
            <span> {menuAmount} </span>
            <button onClick = {()=>{setMenuAmount(menuAmount + 1); Plus(checkedmenu.menuPrice); onCreate(menuAmount)}}>+</button>
            </p>
       

                    ); }

function MenuList({checkedMenus,onRemove,onCreate,menuPrice,Plus,Minus}){

    if (checkedMenus.length === 0) {
        return (
        <ul className="checked_menu_bar">
            
       

 // 선택된 메뉴가 없을 때 렌더링하지 않음     )  }     else     {         return(                             <ul className="checked_menu_bar">                     {checkedMenus.map(checkedmenu =>(                         <Menu checkedmenu={checkedmenu} key={checkedmenu.id} onRemove={onRemove} onCreate={onCreate} Plus={Plus} Minus={Minus}/>                     ))}                

                    )     } } export default MenuList;

[조윤빈]

checkedMenus에 menuAmount를 추가하고싶습니다!!

[codingapple]

onCreate는 파라미터 4번째에 menuAmount넣어야하는데 
onCreate(menuAmount) 이렇게 써서 이상해지는듯요 
checkedMenus state에서 수량도 저장해서 관리하는게 좋아보입니다

[조윤빈]

다른 배열을 만들어서 따로 저장하는 것도 괜찮을까요?
결국 onCreate의 4번째 파라미터로 전달을 하더라도 onCreate는 새로운 객체를 만드는 함수이기 때문에
메뉴의 개수를 증감시키는 것이 아니라 새로운 메뉴가 하나 더 추가된다는 것을 간과하고있었습니다ㅜㅠ

[codingapple]

다른 state만들어도 되는데 관련있는건 한 state에 다 모으는게 편할수도요

[글쓴이]

글