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

[newl]

반나절 동안 머리싸매고 하는데도 모르겠어서 ㅠㅠ 질문 남깁니다. 

 

지금 react 쇼핑몰 Cart.js 테이블 안에 수량 변경 기능 옆에 삭제기능 만드는 중인데 

1.  index.js 에서 function reducer(){} 안에 삭제기능 만드는 경우 방법이랑

2. Cart.js 안에서 useState 를 이용해서 삭제 기능 만드는 경우의 방법이 궁금합니다.

 

구글링과 게시판 질문들 중 삭제기능은  filter로 가능하다는 것 까진 알겠는데 ..  막상 하니까 적용과 코드 작성에 멘붕이 와서... ㅜㅜ

자세한 설명 부탁드립니다!  쌤!

 

아.. 그리고 자바스크립트 지식이 부족해서 응용이 안되는걸까요??

강의안에서 따로 추가로 다른 기능들 만들어보라고 하신거... 쉽게 구현가능할거라고 하셨잖아요 ㅠㅠ

근데 지금  하려고 노력중인데 멘붕이에요...  ㅠㅜ 

리액트 공부가 부족한걸까요? 아님 자바스크립트 공부가 부족한걸까요?? 

 

 

[codingapple]

state가 리듀서에 있으면 거기서 기능개발하시고

컴포넌트파일에 있으면 거기서 기능 개발하시면 됩니다

거기다가 0번상품의 삭제버튼을 누르면 장바구니 state 안에서 id가 0인 항목을 찾아서 제거하세요라는 코드를 짜면 됩니다

 

리액트로 state수정하는 방법을 이미 알고계신다면 이것은 리액트보단 자바스크립트 문법 문제인데

자바스크립트로 array안에 데이터 제거할 때는 filter 함수 이런거 쓰시면 됩니다

[newl]

 index.js 에서 function reducer(){} 안에 삭제기능 만드는 경우 방법 으로 하려고 하는데  

 
else if (액션.type === '상품삭제'){

      let copy = [...state];       
    copy.filter((a) => {
      return a.id !== 액션.데이터.id });
    return copy

  }
 

이렇게 하면 될까요??

[codingapple]

filter함수는 새로운 array자료를 그 자리에 남겨주는 함수기 때문에

copy.filter() 한걸 변수에 저장하고

그 변수를 return 해주면 될 것 같습니다 

[newl]

else if (액션.type === '상품삭제') {

let copy = [...state];
let copy2 = copy.filter(a =>
a.id !== 액션.데이터.id
);
return copy2

}

이렇게 수정했는데 기능이 전혀 작동이 안되네요 ㅠㅠ 

 

 

아 ... 그리고 에러가 하나가 아래와 같이 나는데  더 나는데 이건 어떻게 수정 해야될까요? 

TypeError: Cannot read property 'quan' of undefined
reducer

D:/projects/react/shop/src/index.js:34
31 | } else if (액션.type === '수량증가') {
32 |
33 | let copy = [...state];
> 34 | copy[액션.데이터].quan++;
| ^ 35 | return copy
36 |
37 | } else if (액션.type === '수량감소') {

 

장바구니에 상품 추가를 하고 수량을 증가나 감소 시키면.. 갑자기 아래와 같은 에러가 납니다...

 

기본적으로 설정한 

let 초기값 = [
  { id: 0, name: '멋진신발', quan: 2 },
  { id: 1, name: '멋진신발2', quan: 1 },
];

수량을 설정할땐 당연히 에러가 안나는데 상품을 추가하면 에러가 납니다....

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

    let copy = [...state];
    copy[액션.데이터].quan++;
    return copy

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

    let copy = [...state];
    copy[액션.데이터].quan--;
    return copy

} 

 

위의 코드안에 

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

활용해서 if문 또 줘야 하는 걸까요??

 

 

 

[codingapple]

삭제버튼을 누를 때 state가 변경이 되는지 안되는지 콘솔창 출력 등으로 확인해보시면 되겠습니다

잘 변경이 안되면 dispatch를 잘못 날렸거나 리듀서를 잘못 만들었거나 그럴 수 있습니다 

 

지금 수량증가/감소 기능은 id가 1인 상품의 +/- 버튼을 누르면

state에서 1번째 들어있는 상품을 수정하라고 간단히 개발해놔서 그렇습니다 

1번째 말고 id가 1인 상품을 수정하라고 개발해놓으면 되겠군요 

 

[newl]

감사합니다! 쌤!

덕분에 오류 수정 완료 했습니다 😀

[newl]

그 cart.js 에서 id가  0번째 상품만 상품 갯수 증가와 감소의 버튼 기능이 안먹힙니다ㅠㅠ 

  그리고 메인페이지에 더보기란에 눌렀을때 나오는 axios.get('https://codingapple1.github.io/shop/data2.json') 에 있는 상품 목록들 또한 cart.js 안에서 증가와 감소 기능이 안되는건 어떻게 해결해야 할까요??

 

 

cart.js 코드 입니다. ⬇⬇

 

let 초기값 = [Data];
           

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

  if (액션.type === '항목추가') {
    let 몇번째있니 = state.findIndex((a) => { return a.id === 액션.데이터.id });

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

    if (state.id === 액션.데이터.id) {
      let copy = [...state];
      copy[액션.데이터].quan++;
      return copy
    } else {
      let copy = [...state];
      return copy
    }

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

    if (state.id === 액션.데이터.id) {
      let copy = [...state];
      copy[액션.데이터].quan--;
      return copy
    } else {
      let copy = [...state];
      return copy
    }

  } else if (액션.type === '상품삭제') {

    //filter함수는 새로운 array자료를 그 자리에 남겨주는 함수기 때문에
    //copy.filter() 한걸 변수에 저장하고
    //그 변수를 return 해주면 될 것 같습니다 

    let copy = [...state];
    let copy2 = copy.filter(a =>
      a.id !== 액션.데이터
    );
    console.log(state);
    return copy2

  } else {
    return state
  }
}

[codingapple]

수량증가와 감소도 findIndex등을 이용해서

액션.데이터.id 가 0이면 id가 0인 상품을 state array에서 찾아서 quan++해주세요 라고 코드를 짜놓도록합시다

[newl]

 

index.js 아래와 같이 수정 했는데 계속 안되네요 ㅠㅠ 한숨...

javascript 기초 강의 들어야될까요?? 무슨 공부를 더해야될지 모르겠습니더.. 

 

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

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

  } else if (액션.type === '수량감소') {
    let 같은값 = copy.findIndex((a) => { return a.id === 액션.데이터.id });
    copy[같은값].quan--;
    return copy   

  }

 

아 그리고 Cart 페이지에 table 부분에서  주문하기 버튼을 누르지 않았음에도 한줄(수량증가,감소,삭제버튼만 보이게)이 미리 생성되어져 있습니다.

  이 부분도 에러 일까요? 

<Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
          <th>삭제</th>
        </tr>
        {props.state.map((a, i) => {
          return (
            <tr key={i}>
              <td>{a.id}</td>
              <td>{a.name}</td>
              <td>{a.quan}</td>
              <td>
                <button className="btn btn-danger" onClick={() => { props.dispatch({ type: '수량증가', 데이터: a.id }) }}> + </button>
                <button className="btn btn-primary" onClick={() => { props.dispatch({ type: '수량감소', 데이터: a.id }) }}> - </button>                      
              </td>
              <td>
              <button className="btn btn-dark" onClick={() => { props.dispatch({ type: '상품삭제', 데이터: a.id }) }}> x </button> 
              </td>  

            </tr>
          )
        })}
      </Table>

[글쓴이]

글