제목, 가격 2중 데이터의 배열 map 함수 질문드립니다

Question

담기 버튼을 누르면 제목, 가격의 데이터 가 2개씩 추가되는, 가격 합산 코드를 만드려 합니다현재 2개씩 데이터 추가된것을 map 으로 뿌려주는 것이 잘 안됩니다(반응형을 위해서 데이터 2개가

첫번째 데이터두번째 데이터

이런식으로 통으로 들어가서 줄바꿈을 해도 깨지지 않도록 만들고싶습니다귀한시간 죄송합니다 의견을 들려주세요 감사드립니다import { useEffect, useState } from 'react'; import './Sell.css'; let totalPrice = 0; function SellItem({ item, addPrice }) { let priceUnitCrt = ""; if(item.priceUnit == "WON"){ priceUnitCrt = "\"; }else if(item.priceUnit == "EUR"){ priceUnitCrt = "€"; }; return (

{item.title}

{item.summary}

{item}

{priceUnitCrt} {item.price}

); } function Sell0({ items }) { let [prices, setPrices] = useState([]); let [titles, setTitles] = useState([]); /*let [priceInfos, setPriceInfos] = useState([]);*/ let priceInfos = []; function addPrice(title, priceUnit, price){ let Dcomma = price.replaceAll(",","") let purePrice = parseInt(Dcomma); let korPrice = ""; let priceUnitCrt = ""; document.querySelector(".prices").classList.add('on'); if(priceUnit == "WON"){ console.log(purePrice + "!") totalPrice += purePrice; priceUnitCrt = "\"; setPrices(prices => [...prices, (priceUnitCrt+" "+price)]); setTitles(titles => [...titles, (title)]); }else if(priceUnit == "EUR"){ korPrice = purePrice * 1479.10; totalPrice += korPrice; priceUnitCrt = "€"; setPrices(prices => [...prices, (priceUnitCrt+" "+price+" ( "+"\"+korPrice.toString().replace(/\B(? [...titles, (title)]); }; for(let i=0; i { document.querySelector("header").classList.add('bk'); document.querySelector("body").classList.remove('request'); }, []); return (

초분광 장비판매

{items.map((item) => { return( ); })}

{titles && titles.map((titleV) => { return (

{titleV}

); })}

{prices && prices.map((priceV) => { return (

{priceV}

); })}

Total{": \ "+totalPrice.toString().replace(/\B(?

); } export default Sell0;

kenu,전독시 · Accepted Answer

담기 버튼을 누르면 제목과 가격의 데이터가 2개씩 추가되는 가격 합산 코드를 만드는 것에 대한 요청을 이해했습니다. 또한, 반응형 웹 디자인을 위해 데이터가 통으로 들어가서 줄바꿈을 해도 깨지지 않도록 만드는 것에 대한 요구사항도 있습니다. 이를 위해 제안드릴 수 있는 방법은 다음과 같습니다.1. 데이터 저장 방식 개선먼저, 제목과 가격을 함께 저장하는 방식을 개선해야 합니다. 현재는 제목과 가격을 별도의 배열에 저장하고 있으며, 이는 데이터를 관리하는 데 비효율적일 수 있습니다. 각 항목에 대한 정보를 하나의 객체로 묶어 배열에 저장하는 것이 더 효율적일 것입니다.let [items, setItems] = useState([]); 2. 데이터 추가 함수 수정addPrice 함수를 수정하여 제목과 가격을 함께 저장하도록 합니다.function addPrice(title, priceUnit, price) { let Dcomma = price.replaceAll(",", ""); let purePrice = parseInt(Dcomma); let korPrice = ""; let priceUnitCrt = ""; if (priceUnit === "WON") { totalPrice += purePrice; priceUnitCrt = "\"; } else if (priceUnit === "EUR") { korPrice = purePrice * 1479.10; totalPrice += korPrice; priceUnitCrt = "€"; } // 제목과 가격을 함께 저장 setItems(items => [...items, { title, price: priceUnitCrt + " " + price, korPrice: korPrice }]); } 3. 데이터 렌더링 방식 개선데이터를 렌더링할 때, 각 항목을 통으로 묶어 줄바꿈을 해도 깨지지 않도록 하기 위해 CSS를 사용하여 스타일링합니다. 예를 들어, 각 항목을 묶는

태그에 display: flex;와 flex-wrap: wrap; 스타일을 적용하여 줄바꿈을 허용할 수 있습니다..price-item { display: flex; flex-wrap: wrap; margin-bottom: 10px; /* 각 항목 사이에 여백을 추가 */ } 4. 데이터 렌더링 코드 수정마지막으로, 데이터를 렌더링하는 코드를 수정하여 제목과 가격을 함께 표시합니다.

{items.map((item, index) => (

{item.title} {item.price}

))}

Total{": \ "+totalPrice.toString().replace(/\B(?

이렇게 수정하면, 담기 버튼을 누르면 제목과 가격의 데이터가 2개씩 추가되며, 반응형 웹 디자인을 위해 데이터가 통으로 들어가서 줄바꿈을 해도 깨지지 않도록 할 수 있습니다.from: https://www.phind.com/search?cache=ie07e6viz68ue3q34hq3wbc2

제목, 가격 2중 데이터의 배열 map 함수 질문드립니다

1개의 답변

Q&A 목록