리엑트 반복문을 사용할때 state 값 공유 질문입니다.

[김창규]

안녕하세요 현재 쇼핑몰 만들기에 도전하는 중 반복문을 이용하여 장바구니의 상품을 출력하고 수량을 입력 할 수 있도록 하는데 state의 값이 공유가 되어 하나를 바꾸면 모든 상품의 값이 바뀌어 버립니다. 강의 중에도 이러한 현상이 있었던 것 같은데 어떤 식으로 state를 만들어야 하나요?

[codingapple]

장바구니 항목을 각각 기록가능한 array같은게 필요하지않을까요

[김창규]

State의 array를 상품의 갯수에 맞게 동적으로 증가 시켜야 하는데 그걸 어떻게 해야 할지 모르겠습니다 ㅠ

[codingapple]

state가 어떻게 생긴건지 코드를 올려주시면 됩니다 

[김창규]

아래처럼 코드를 짰습니다 

 

import '../css/orderList.css';
import React, { useState,useEffect } from 'react';
import LoginHeader from './LoginHeader';
import $ from 'jquery';
import jquery from 'jquery';
window.$ = window.jquery = jquery;
let defaultPrice = [];
function deleteItem(){
  
}

//총 금액 계산 함수
  function totalPricecalc(list){
    let total = 0;
    //총 금액 변경
    for(let i =0; i < list.length; i++){
      let price = document.querySelectorAll('.price')[i].innerText;
      price = price.replace(/,/g, "");
      price = parseInt(price);
      total += price;
    }
    const str = total.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
    document.querySelector('.totalPrice').innerText = str + '원';
  }

function OrderList() {
  //주문목록 데이터를 가져옴
  let [list,setlist] = useState();
  //상품수량
  let [inputValue,setInputValue] = useState(1);
  useEffect(() => {
    $.ajax({
      type: 'get',
      url: '/product_info',
    })
    .then((data) => {
      setlist(data);
    })
    .catch((err) => {
      return err;
    })
  },[])

  return (
    <div>
      <LoginHeader/>
      <section>
        <h2 style={{ textAlign: 'center' , fontSize: '2rem', marginBottom: '1em', marginTop: '2em'}}>장바구니</h2>
        <div className="shopping_list_con">
          <table style={{ borderBottom: '1px solid #999' }}>
            <thead>
              <tr className="table_header">
                <th>이미지</th>
                <th>상품정보</th>
                <th>수량</th>
                <th>구매금액</th>
                <th>선택</th>
              </tr>
            </thead>
            <tbody>
                { list &&
                  list.map((e,i) => {
                  defaultPrice.push(e.price);
                  
                  function insertPrice(e){
                    const regex = /^[0-9\b -]{0,13}$/;
                    if (regex.test(e.target.value)) {
                      setInputValue(e.target.value);
                    }
                    //수량에 변화가 생기면 함수를 실행
                    const qun = document.querySelectorAll('.quantity')[i].value;
                    const text = document.querySelectorAll('.price')[i];
                    //수량 변경시 가격 구매금액 변동후 총 금액을 계산하는 함수 실행
                    const dePrice = defaultPrice[i];
                    const result = qun * dePrice;
                    const Price = result.toString()
                    .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
                    text.innerText = Price + '원';
                    totalPricecalc(list);
                  }
                  return(
                    <>
                      <tr className="table_body" key={i}>
                        <td>
                          <a href={'detail/${e.id}'} className="orderlist_img_bx">
                            <img src={'${e.img}'} alt={'상품번호${e.id}'}/> {/* 상품 이미지 */}
                          </a>
                        </td>
                        <td>
                          <p>{e.productName}</p>  { /* 상품정보 */ }
                        </td>
                        <td>
                          <input type="text" value={inputValue} className="quantity" maxLength="3" onChange={insertPrice}/>
                        </td>
                        <td>
                          {/*처음 시작할때 ,없이 값이 나오는 것을 막기위해 정규식을 이용함*/}
                          <span className="price">{e.price.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")}원</span>  {/* 구매금액 */}
                        </td>
                        {/* 선택 */}
                        <td>
                          <button className="order_btn" onClick={deleteItem} data-id={'${e.productId}'}>삭제</button>  
                        </td>
                      </tr>
                    </>
                  )
                })
              }
            </tbody>
          </table>
          <div className="orderListTotal">
            총 가격:<span className="totalPrice"></span>
          </div>
        </div>
      </section>
    </div>
  )
}

export default OrderList

[codingapple]

list가 장바구니데이터인가요 어떻게 생겼는지는 안보이는군요 

inputValue가 현재 주문수량을 저장하는 state인가요? 그럼 지금 상품이 3개면 [0,0,0] 이렇게 개별적으로 기록해두는게 좋지 않을까요

는 버튼누르면 무엇을 어떻게 수정하고 싶은데 어디가 안되는 것인지 설명 부탁드립니다 

 

그리고 function 정의는 html 내부에 중괄호 열고 하지는 않아서 밖으로 빼는게 좋아보입니다

[김창규]

아 일단 list는 장바구니 데이터가 담긴 데이터가 맞습니다. 데이터를 서버로 받아와 useEffect로 list에 넣었습니다

그리고 inputValue가 주문수량을 저장하는 state도 맞습니다. 지금 문제가 저 inputValue가 list의 담긴 크기만큼 배열의 크기가 자동으로 증가하게 하고 싶습니다 list에 담긴 정보가 3개면 inputValue의 배열 안에 크기도3개가 되어 각각의 상품에서 input을 사용하고 싶습니다.

현재 input에 상품의 수량을 입력하면 상품이 2개 이상이라고 할때 어떤 상품의 input 값을 바꾸면

모든 상품의 input값이 바뀌어 버립니다.

[codingapple]

var a = Array(3).fill(0)

하면 a가 [0,0,0] 이렇게 되긴 하는데

 

그냥 list 라는 state가 뭐 대충 [{},{},{}] 이렇게 생겼으면

그 안에 주문수량을 { 주문수량 : 0 } 이런 식으로 기록해둬도 편리할듯요

굳이 수량부분만 따로 state로 만들어서 관리하기 귀찮게할 필요는 없는 것 같아보이긴 합니다  

 

[글쓴이]

글