react 쇼핑몰 Cart.js 삭제기능 질문입니다

[codingapple]

저거 copy라는 변수 갑자기 나타났는데 변수 정의하는부분이 빠진듯요?

let copy = […state]; 

장바구니에 이미 상품이있는건 장바구니 state에 기본값으로 이미 상품이 들어있기때문이 아닐까요

[newl]

앜, copy 변수 정의 는 맨 위에 해놨었네요..

 
⬇⬇⬇⬇ index.js 에서 ⬇⬇⬇⬇
 

let 초기값 = [Data];

function reducer(state = 초기값, 액션) {   

  if (액션.type === '항목추가') {

    let copy = [...state];
    let 몇번째있니 = copy.findIndex((a) => { return a.id === 액션.데이터.id });

    if (몇번째있니 >= 0) {
      
      copy[몇번째있니].quan++
      return copy
    } else {
      copy.push(액션.데이터)
      return copy
    }
  } else if (액션.type === '수량증가') {

    let copy = [...state];
    let 같은값 = copy.findIndex((a) => { return a.id === 액션.데이터.id });
    copy[같은값].quan++;
    return copy

  } else if (액션.type === '수량감소') {

    let copy = [...state];
    let 같은값 = copy.findIndex((a) => { return a.id === 액션.데이터.id });
    copy[같은값].quan--;
    return copy

  }
  else if (액션.type === '상품삭제') {
    let copy = [...state];
    let copy2 = copy.filter((a) => { return a.id !== 액션.데이터.id }
    );
    return copy2

  }

  else {
    return state
  }

}

 

위와 같이 수정했는데요 .쌤

 

증가,감소 버튼클릭시

TypeError: Cannot read property 'id' of undefined 에러가 뜨거나 

테이블에서  NaN 오류값이 뜹니다.

 

[codingapple]

let 초기값 = [Data]; 이거도 수상해보이는데요

Data라는 변수는 object 자료인가요 어떻게 생겼습니까 

[newl]

import Data from './data.js';
let 초기값 = [Data];

입니다. 

 

제가  의도한건 

cart첫페이지에는 아무 상품도 안담겨 있다가 detail 페이지에서 주문하기를 누르면 cart의 테이블 안에 추가되는 형식으로 만들고 싶은데 자꾸 오류가 나네요 ㅜㅜ

초기값을 0 으로  정해야될까요?

 

 

[codingapple]

Data라는 변수가 [{},{}] 분명 이렇게 생겼을 것 같은데 이걸 [] 안에 담으시면 안될듯요

let 초기값 = [...Data] 라고 쓰시거나 

let 초기값 = [] 빈걸로 냅둬봅시다

[newl]

 let 초기값 = []; 이라고 수정 했는데

수량 증가,감소 버튼을 눌러도...

TypeError: Cannot read property 'quan' of undefined 라는 에러가 뜹니다?

 

 

⬇⬇⬇ index.js  ⬇⬇⬇

 

} else if (액션.type === '수량증가') {

    let copy = [...state];
    let 같은값 = copy.findIndex((a) => { return a.id === 액션.데이터.id });
    copy[같은값].quan++;
    return copy

  } else if (액션.type === '수량감소') {

    let copy = [...state];
    let 같은값 = copy.findIndex((a) => { return a.id === 액션.데이터.id });
    copy[같은값].quan--;
    return copy

  }

 

 

copy 변수 설정을 바꿔줘야 할까요??

[codingapple]

copy.findIndex((a) => { return a.id === 액션.데이터}); 인듯요

[newl]

에러 해결됬습니다

무한 질문에  설명답변 해주셔서 감사합니다 ?

 

그런데 

copy.findIndex((a) => { return a.id === 액션.데이터}); 에서 

액션.데이터.id 로는 작성 못하는건가요??  <--- 이부분에 대한 에러는 안떠가지고.. 헤깔리네요 

 

항목추가 부분은  

  if (액션.type === '항목추가') {

    let copy = [...state];
    let 몇번째있니 = copy.findIndex((a) => { return a.id === 액션.데이터.id });

    if (몇번째있니 >= 0) {      
      copy[몇번째있니].quan++
      return copy
    } else {
      copy.push(액션.데이터)
      return copy
    }
  } 

 

 

copy.findIndex((a) => { return a.id === 액션.데이터.id }); 로 작성한거랑 무슨 차이가 있는거죠??

 

[codingapple]

dispatch하실 때 props.dispatch({ type: ‘수량증가’, 데이터: a.id })

이렇게 보내셨는데 그러면 리듀서안에서 데이터를 꺼내쓸 때

액션.데이터만 하면 보낸 데이터가 나오기 때문입니다 액션.데이터.id말고요 

[글쓴이]

글