Redux 5 강의 응용문제(2번)

[조승현]

응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만?

안녕하세요 !
문제 if문 조건이 이상한지..자꾸 조금씩 다르게 동작되는데..아무리 생각해도 정답이 떠오르지 않아서 질문 드립니다.

import React from "react";
import { useEffect, useState, useContext } from 'react';
import { useParams } from 'react-router-dom';
import { Nav } from 'react-bootstrap';
import { Context1 } from './../App.js';
import { addItem, setIem } from './../store';
import { useDispatch, useSelector } from 'react-redux';

function Product(props){
    let dispatch = useDispatch();
    let state = useSelector((state)=>{return state});
    let {id} = useParams();
    let title,content,price = null;
    let image = null;
    for(let i=0; i<props.shoes.length; i++){
        let t = props.shoes[i];
        if(t.id === Number(id) && id <= t.id ){
            title = t.title;
            content = t.content;
            price = t.price;
            image = `https://codingapple1.github.io/shop/shoes${t.id+1}.jpg`
        } else if(id >= props.shoes.length){
            console.log('종료');
        }
    }
    //console.log(id)

    useEffect(()=>{
        setTimeout(()=>{
           let div = document.getElementsByClassName('alert');
           div[0].remove();
        }, 2000)
    },[]);
    let [button, setButton] = useState(0);
    let [detailFade, setDetailFade] = useState('');
    
    return(
        <div className={`container opacity ${detailFade}`}>
            <div className="alert alert-warning">
                2초이내 구매시 할인
            </div>
            <div className="row">
                <div className="col-md-6">
                
                </div>
                <div className="col-md-6">
                <h4 className="pt-5">{title}</h4>
                <p>{content}</p>
                <p>{price}</p>
                <button onClick={()=>{
                    let stateId = props.shoes[id].id;
                    let cartId = null;
                    for(let i=0; i<state.cart.length; i++){
                        cartId = state.cart[i].id;
                    }
                    //console.log(state.cart);
                    console.log(id);
                    console.log(cartId)
                    if(id != cartId ){
                        dispatch(addItem( {id : Number(`${stateId}`), name : `${title}`, count : 1} ));
                    } else{
                        dispatch(setIem(id));
                    }
                }}>주문하기</button>
                </div>
            </div>
            <Nav variant="tabs"  defaultActiveKey="link0">
                <Nav.Item>
                <Nav.Link onClick={()=>{ setButton(0) }} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                <Nav.Link onClick={()=>{ setButton(1) }} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                <Nav.Link onClick={()=>{ setButton(2) }} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>
            <TabContent button={button} setDetailFade={setDetailFade} shoes={props.shoes}/>
        </div>
    )
}

function TabContent(props){
    let [fade, setFade] = useState('');

    useEffect(()=>{
        let a = setTimeout(()=>{setFade('end')}, 100);
        let b = setTimeout(()=>{props.setDetailFade('opacity100')}, 100);
        return ()=>{
            clearTimeout(a);
            setFade('');
        }
    }, [props.button]);
    return (
        <div className={`start ${fade}`}>
        {[ <div>{props.shoes[0].title}</div>, <div>{props.shoes[1].title}</div>, <div>{props.shoes[2].title}</div> ][props.button]}
        </div>
    )
  }

export default Product;

[codingapple]

for(let i=0; i<state.cart.length; i++){
  cartId = state.cart[i].id;
}
뭔가이상해보입니다 array안에 뭐가 들어있는지 찾으려면 findIndex() 쓰면 쉽습니다

[조승현]

감사합니다 ! 해결했습니다 ㅎㅎ

[글쓴이]

글