Redux 5 응용문제 2

[Yeong Heon Kim]

안녕하세요 사과선생님,

응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만?
에서 일반 반복문 돌려서 할때는 기능구현가능했는데 findIndex로 기능구현 할려고하니깐 되긴됩니다만...Red Knit 그러니깐 id넘버가 1 인 빨간색 운동화 이친구를 cart창에 넣을려고하면 에러가생기네여
제가봤을떄는 store.js에 initialState에  initialState: [{ id: 0, name: 'White and Black', count: 2 }, { id: 2, name: 'Grey Yordan', count: 1 }], 요 두녀석밖에 없어서 그러는거같은데 어떻게 하면 에러를 해결할수있는지 도무지 해도 안됩니다...

function Details(props) {

    let [fade2, setFade2] = useState('');

    useEffect(() => {
        setTimeout(() => { setFade2('end') }, 100)

        return () => {
            setFade2('')
        }
    }, [])

    let { id } = useParams();
    let findItem = props.shoes.find((x) => {
        return x.id == id;
    });
    console.log(findItem);
    let [alert, setAlert] = useState(true);
    let [inputValue, setInputValue] = useState('');
    let [tab, setTab] = useState(0);
    let dispatch = useDispatch();
    let state = useSelector((state) => state.item);
    console.log(state);
    // redux 5 응용문제 solution 1 (findIndex)
    let findProduct = state.findIndex((a) => { return a.id == id });
    console.log(findProduct);

    // redux 5 응용문제 solution 2 (array만들어서 넣어주기)
    let newArray = [];
    for (let i = 0; i < state.length; i++) {
        newArray.push(state[i].id);
    }
    console.log(newArray);

<button className="btn btn-danger" onClick={() => {
                            //if (!findProduct == id) {
                            //    dispatch(addItem({ id: findItem.id, name: findItem.title, count: 1 }))
                            //} else {
                            //    dispatch(addCount(findItem.id))
                            //}
                            if (!newArray.includes(findItem.id)) {
                                dispatch(addItem({ id: findItem.id, name: findItem.title, count: 1 }))
                            } else {
                                dispatch(addCount(findItem.id))
                            }
                        }}>주문하기</button>

요기중에 기울기되어있는 주석처리된 이친구가 findIndex로 기능구현할려고한 친군데 아무리해도 잘안되네요 ㅠㅠ
그 바로 밑에 친구가 바로 일반 반복문처리해서 새로운array안에 id값 넣어서 한 친군데 이친구는 Red Knit창에서 주문하기 버튼눌러도 이상이없습니다...

아무리머리싸매도 답이안나옵니다 도와줍쇼...

[codingapple]

findProduct는 숫자같은데 숫자 왼쪽에 ! 붙여서 이상해진게 아닐까요

[Yeong Heon Kim]

if (findProduct != id) {
                                dispatch(addItem({ id: findItem.id, name: findItem.title, count: 1 }))
                            } else {
                                dispatch(addCount(findItem.id))
                            }
요렇게 바꾸니깐 첫번쨰항목인 'White and Black'요녀석만 잘구현되고 다른 녀석들은 중복으로 cart페이지에 추가되버리네여...
그래서 findIndex대신  let findProduct = state.filter((a) => { return a.id == id });
    console.log(findProduct[0].id); 요런식으로 구현해봤습니다 그래도 오류가 나서 store.js가서 initalState에가서
{ id: 1, name: 'Red Knit', count: 1 } 요걸추가해주니깐 되더라고요 그런데 이걸추가해서 구현할라했던 기능이아니였어서
어떻게하면 store.js에서 {}이걸 하드코딩해서 추가안해주고 findIndex로 원하던 기능을 구현할수있을까요... 정말 모르겠습니다 선생님 ㅠ

[Yeong Heon Kim]

filter써서 if문은 이런식으로 구현했습니다
<button className="btn btn-danger" onClick={() => {
                            if (!findProduct[0].id == id) {
                                dispatch(addItem({ id: findItem.id, name: findItem.title, count: 1 }))
                            } else {
                                dispatch(addCount(findItem.id))
                            }
이유는 모르겠지만 이렇게해도 잘 작동했었고
<button className="btn btn-danger" onClick={() => {
                            if (findProduct[0].id != id) {
                                dispatch(addItem({ id: findItem.id, name: findItem.title, count: 1 }))
                            } else {
                                dispatch(addCount(findItem.id))
                            }
이렇게 해도 작동이잘됬긴하는데 일단 이것들이 다 원래할려고했던 로직에서 벗어나서여 ㅠㅠ

[codingapple]

주문버튼누르고 재렌더링이 안되어서 그럴 수 있습니다 
주문누르면 findIndex하는 함수를 다시 실행합시다 아니면 redux store 안에서 주문하기용 함수만들고 로직짜면 됩니다

[글쓴이]

글