-
안녕하세요
아래의 두번째 Red Knit 상품을 선택한 후
주문하기 버튼을 클릭하면
아래와 같이 상품이 잘 추가가 됩니다.
하지만 수량증가 버튼을 클릭하면 아래와 같이 에러가 발생합니다.
첫 번째 상품이 카트에 있을때는 수량증가,감소가 잘 동작하는데, 첫 번째 상품이 없을 경우 에러가 발생합니다.
어떤 부분을 수정하면 정상적으로 동작할까요
<ul>
<li>작성된 코드 입니다.</li>
</ul>
Detail.js입니다.=================================================
import React, {useEffect, useState} from 'react'
import { useHistory, useParams } from 'react-router-dom'
import styled from 'styled-components'
import { Navbar,Container,Nav,NavDropdown,Jumbotron,Button, Card } from 'react-bootstrap';import { CSSTransition } from "react-transition-group"
import './Detail.scss'
import { connect } from 'react-redux';let 박스 = styled.div'
padding: 20px;
';
let 제목 = styled.h4'font-size: 25px;
color: ${ props => props.색상 }
';
function Detail(props) {
let [Alert,ChangeAlert] = useState(true)
let [inputData,ChangeInputdata] = useState('')
let { id } = useParams()
let history = useHistory();
let selectshoes = props.shoes.find(function(product){
return product.id == id
})
let [tab, ChangeTab] = useState(0)
let [스위치, 스위치변경] = useState(false)
useEffect(()=>{
let delAlert = setTimeout(()=>{
ChangeAlert( false )
}, 2000)
return ()=>{ clearTimeout(delAlert) }
},[]);
return (
<div className="container">
<박스>
<제목>상세페이지</제목>
</박스>
{
Alert === true
? (<div className="my-alert2">
<p>재고가 얼마 남지 않았습니다.</p>
</div>)
: null
}<div className="row">
<div className="col-md-6">
<img src={'https://codingapple1.github.io/shop/shoes' + (selectshoes.id + 1) + '.jpg'} width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{selectshoes.title}</h4>
<p>{selectshoes.content}</p>
<p>{selectshoes.price}원</p>
<Info stock={props.stock}/>
<button className="btn btn-danger" onClick={()=>{
props.ChangeStock([9,11,12])
props.dispatch({type:'항목추가',
데이터: {id:selectshoes.id, name:selectshoes.title, quan:1}})
history.push('/cart')
}}>주문하기</button>
<button className="btn btn-danger" onClick={()=>{
history.push('/');
}}>취소</button>
</div>
</div><Nav className="mt5" variant="tabs" defaultActiveKey="link-0">
<Nav.Item>
<Nav.Link eventKey="link-0" onClick={()=>{
스위치변경(false); ChangeTab(0)
}}>상품설명</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1" onClick={()=>{
스위치변경(false); ChangeTab(1)
}}>배송정보</Nav.Link>
</Nav.Item>
</Nav><CSSTransition in={스위치} classNames="wow" timeout={500} >
<TabContent tab={tab} 스위치변경={스위치변경} />
</CSSTransition></div>
)
}function TabContent(props) {
useEffect(()=>{
props.스위치변경(true)
})if (props.tab === 0) {
return <div>전품목 20% 세일</div>
} else if (props.tab === 1) {
return <div>당일배송</div>
} else if (props.tab === 2) {
return <div>2번째 내용입니다.</div>
}
}function shoeCard(props) {
}function Info(props) {
return (
<p>재고: {props.stock[0]}</p>
)
}function 함수명(state) {
return {
state : state.reducer,
alertOpen : state.reducer2
}
}export default connect(함수명)(Detail)
=================================================
Cart.js 입니다.
=================================================
import React from 'react';
import {Table} from 'react-bootstrap'
import { connect } from 'react-redux';function Cart(props) {
return (
<div>
<Table responsive="sm">
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경</th>
</tr>
</thead>
<tbody>
{
props.state.map((a,i)=> {
return (
<tr key={i}>
<td>{a.id}</td>
<td>{a.name}</td>
<td>{a.quan}</td>
<td>
<button onClick={()=>{props.dispatch( {type :'수량증가', 데이터 : a.id} )}}>+</button>
<button onClick={()=>{props.dispatch( {type :'수량감소', 데이터 : a.id} )}}>-</button>
</td>
</tr>
)
})
}
</tbody>
</Table>
{
props.alertOpen === true
? (<div className="my-alert2">
<p>지금 구매하시면 신규할인 20%</p>
<button onClick={()=>{props.dispatch( {type :'alert닫기'} )}}>닫기</button>
</div>)
: null
}
</div>
)
}function 함수명(state) {
return {
state : state.reducer,
alertOpen : state.reducer2
}
}export default connect(함수명)(Cart)
=================================================
index.js 입니다.
=================================================
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';let 기본state = []
let alert초기값 = true;
function reducer2(state = alert초기값, 액션) {
if (액션.type==='alert닫기'){
state = false;
return state;
} else {
return state
}
}function reducer(state = 기본state, 액션){
if( 액션.type === '항목추가'){let found = state.findIndex((a)=>{ return a.id === 액션.데이터.id })
if (found >= 0 ){
let copy = [...state]
copy[found].quan++
return copy
} else {
let copy = [...state]
copy.push(액션.데이터);
return copy
}
} else if ( 액션.type === '수량증가'){let copy = [...state]
copy[액션.데이터].quan++;
return copy} else if (액션.type === '수량감소'){
let copy = [...state]
copy[액션.데이터].quan--;
return copy} else {
return state
}
}let store = createStore(combineReducers({reducer,reducer2}));
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Provider store={store}>
<App />
</Provider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);=================================================
강의에서 알려주신 것 처럼 [액션.데이터].quan++ 을 사용하여 작성하였습니다.
0번째 상품을 장바구니에 옮겨놓으면 모든 것이 정상대로 동작합니다.
하지만 0번째 상품이 없으면 에러가 납니다.
- 답변은 로그인 후 가능합니다.