생각기록
2023-02-01 kushk 오류_장바구니_품목별 인식 안하는 err + 그 흐름 파악 해보기 본문
콘솔을 찍어..
오류 종류
커피이름들이 다른데, 한 품목으로 합쳐서 계산 되는것
느낌상 데이터 key값이 잘못 된 것 같다는것은 알고 있었는데
어찌 해결해야할지 모르겠었다.
도움을 받고나니
의심가는 부분, 모르는 부분에 모두 console.log를 찍으셨다.
id가 뭔지 모르겟다고 하니 바로 콘솔을 찍으셧다.
id => 커피, 논커피 품목
name => 아메리카노
amout => 수량
price => 가격
useContext 로 지정되어있는 값
carCtx의 addItem목록에
키:값으로 된 객체 값을 할당한다.
즉 이 값들을 다른 컴포넌츠로 props로 보내고 있다.
해당 컴포넌츠로 가보면
문자열 좌우에서 공백을 제거하는 함수가 trim() 함수
좌우공백만 처리
정상적이라면 해당 input의 수량을 onAddToCart ( )함수에 값을 인자로 넣어서 실행
즉 주문하기 버튼을 누르면, useContext.addItem에 수량이 추가 + 데이터?가 가는것같다.
그 값을 useContext가 가지고 있고
Cart .jsx 안에서 가져다 쓰는 느낌인 것 같은데
중간에서 CartProvider가 중간다리 역할을 하는 것 같다.
App.js 파일
CartProvider 로 크게 감싸고 있다.
CartProvider.jsx
에서 주문하기 버튼을 누르면, ADD라는 행동을 취하게 한다
findIndex 함수 기본 사용 방법
배열 요소에서 조건에 맞는 index를 찾는 것
참고 : https://developer-talk.tistory.com/151
[JavaScript]배열의 특정 값을 찾는 find, findIndex 함수
JavaScript에서 find 함수와 findIndex 함수는 조건을 만족하는 배열 요소의 값 또는 인덱스를 찾기 위해 사용하는 함수입니다. find 함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소
developer-talk.tistory.com
'강의 정리 > React JS' 카테고리의 다른 글
| npm install 오류 (code ERESOLVE) (0) | 2023.02.02 |
|---|---|
| 2023-02-02 React 서버 배포 (0) | 2023.02.02 |
| 2023-02-01 react useReducer란? (0) | 2023.02.01 |
| 2023-02-01 React_forwardRef (0) | 2023.02.01 |
| 2023-02-01 useContext 대체 뭐길래.. useMemo? (0) | 2023.02.01 |
