-
안녕하세요 선생님! useParams 관련된 오류를 끝내 해결하지 못해서 질문 드립니다 ㅠㅠ
Detail.js 페이지에서 상품에 대한 정보가 정상적으로 나오고 있습니다.
그러나 cart.js페이지로 이동하는 과정에서, useParams로 받아온 정보를 id값으로 연결한 find함수를 적용한 productId값을
console을 찍어보면 undefind가 뜹니다. (그러나 productId로 데이터바인딩한 detail.js페이지는 정상적으로 작동합니다!)
아래 detail.js페이지 코드 입니다.
const Detail = (props) => {
let { id } = useParams();
let productId = props.state.find(function(a) {
return a.id == id;
});
console.log(id) // 0 << 0번째 상품 id가 정상적으로 출력됩니다
console.log(productId) // Object << 해당 상품의 object값이 모두 정상출력됩니다
console.log(props.state) // Array(3) << redux에서 전달하는 기본 state값은 정상 출력됩니다return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src={'https://codingapple1.github.io/shop/shoes' + (productId.id+1) + '.jpg'} width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5"> {productId.title} </h4>
<p> {productId.content} </p>
<p> {productId.price}원 </p>
<p> 재고: {props.lestState[0]}</p>
<button className="btn btn-danger order" onClick={() => {
props.dispatch({ type: 'lestSubstract' });
props.dispatch({ type: 'cartAdd', payload: {id: productId.id , title: productId.title, quan: 1} });
history.push('./cart');
}}> 주문하기</button>
<button className="btn btn-danger back" onClick={() => { history.push('/') }}>Back</button>
</div>
</div></div>
);
};function shoeProps(state) {
return {
state: state.reducer,
lestState: state.reducer2,
cartState: state.reducer3
}
}
export default connect(shoeProps)(Detail);cart.js페이지는 위와 같이 구성되어 있으며, index.js파일 내 redux로 정의한 부분은 아래와 같습니다!
let cartState = [
{id: 0, name: 'nike', quan: 1}
];// cart 데이터
function reducer3(state = cartState, action) {
// 주문하기 누르면 cart에 항목 추가
if (action.type === 'cartAdd') {
let found = state.findIndex((a) => { return a.id === action.payload.id })
if (found >= 0) {
let setCart = [...state];
//setCart[found] = action.payload;
setCart[found].quan++;
return setCart;
}
else{
let setCart =[...state];
setCart.push(action.payload)
return setCart;
}
}// cart에 수량증감
else if (action.type === 'plus') {
let setCart = [...state]
setCart[action.payload].quan++;
return setCart
}else if (action.type === 'substract') {
let setCart = [...state]
setCart[action.payload].quan--;
return setCart
}else {
return state
}
}detail.js페이지에서 정상적으로 경로(/detail/0)가 접속되고,
id 라는 변수도 0으로 정상 출력되며,
props.state도 array(3)으로 정상 출력되나,
문제(에러)는 "주문하기"버튼을 누를 때 에러가 발생합니다!
"주문하기" 버튼을 누르면 url은 cart페이지로 넘어갑니다(http://localhost:3000/detail/cart)
그러나 화면에는 아래와 같은 에러메시지가 뜹니다
TypeError: Cannot read property 'id' of undefined
Detail
C:/Users/Desktop/react-tutorials/ShoeShop/shop/src/Components/Detail/Detail.js:55
52 | }
53 | <div className="row">
54 | <div className="col-md-6">
> 55 |<img src={'https://codingapple1.github.io/shop/shoes' + (productId.id+1) + '.jpg'} width="100%" />
| ^ 56 | </div>
57 | <div className="col-md-6 mt-4">
58 | <h4 className="pt-5"> {productId.title} </h4>detail.js페이지에서 productId로 데이터바인딩 한 부분이 잘 출력되는데
다른 페이지(cart.js)로 넘어가는 부분에서 productId부분에 문제가 되는 상황이어서
어떤 부분을 수정해야할지 잘 모르겠습니다 ㅠㅠ
cart.js페이지로 넘어간 이후("주문하기" 버튼을 누른 직후)에 에러페이지가 보이는 상황이며, url은 cart페이지로 넘어갔지만,
에러메시지에 의하면 detail.js:55에 에러가 있다고 나오기에
detail페이지에서 콘솔을 찍어보았습니다.
console로 찍어보면 아래처럼 undefind가 출력됩니다
console.log(productId) // undefind
productId의 결과값은 undefind가 뜨는데, detail.js페이지가 로드될때는 이미지, 상품명 등 모두 정상적으로 뜨는데
왜 cart페이지로 넘어간 이후에 productId가 뒤늦게 오류로 잡히는지 ...답변 부탁드립니다 ㅜ.ㅜ
- 답변은 로그인 후 가능합니다.