Javascript 对象映射的状态数组

我使用

reactjs

（使用react功能组件）创建了一个在线购物网站。因此，客户可以向购物车添加多个产品

可以获得不同数量的产品。当用户单击“添加到购物车”按钮时，特定的产品详细信息会添加到数据层（我在

react

上使用context

api

）

如果用户增加产品数量，它将作为新产品添加到数据层

将产品添加到购物车后，用户可以单击“继续结帐”，然后用户将重定向到 付款页。在这种情况下，我检索用户使用'useEffect'添加到购物车的所有产品详细信息，并将其存储在useState上（“purchaseItem”是我用于此的useState）

这是我使用

useffect

（“pid”表示产品id）

我想像这样使用这个数组创建一个新数组。并存储在“purchaseDetails”中

useState

这是我想要的输出 （数量表示该元素出现的次数。产品id可用于标识对象）

这是支付组件代码

 import {useStateValue} from '../states/StateProvider'
    import {getBasketitemqty } from "../states/reducer";
    
        function Payment() {
        
          
            const [state,dispatch] = useStateValue();
        
            const [purchaseItem,setpurchaseItem] = useState([]);
        
            const [purchaseDetails,setpurchaseDetails] = useState([]);
        
            const key = "pid";
        
            useEffect(() => {
                
                setpurchaseItem([...new Map(state.basket.map((item) => [item[key], item])).values()]);
//this code will retrive all the unique products wich user add to cart 
               
          
              }, [state.basket]);


            const testrqeust = ()=>{

             purchaseItem.forEach(item => setpurchaseDetails(prevState => ([{
            ...prevState, 
            item:item,
            itemqty:getBasketitemqty(state.basket,item.pid),
        
        }])));
                 
         /*this getBasketitemqty function takes two parameters those are state and the product id and it gives the qty which user want from that specific product*/

            }
        
         
        
          return (
            <div className="payment container">
        
                <button onClick={testrqeust} className="btn btn-lg btn-info">Confirm Order</button>
               
             
            </div>
          );
        }
        
        export default Payment;

从“../states/StateProvider”导入{useStateValue}
从“./states/reducer”导入{GetBasketItemQuantity}；
功能支付（）{
const[state，dispatch]=useStateValue（）；
const[purchaseItem，setpurchaseItem]=useState（[]）；
const[purchaseDetails，setpurchaseDetails]=useState（[]）；
const key=“pid”；
useffect（（）=>{
setpurchaseItem（[…新映射（state.basket.Map（（item）=>[item[key]，item]））.values（））；
//此代码将检索用户添加到购物车的所有唯一产品
}，[state.basket]）；
常量testrqeust=（）=>{
forEach（item=>setpurchaseDetails（prevState=>([{
…国家，
项目:项目,，
itemqty:getBasketitemqty（state.basket，item.pid），
}])));
/*此getBasketitemqty函数接受两个参数，即状态和产品id，并提供用户希望从该特定产品获得的数量*/
}
返回(
确认订单
);
}
出口违约金；

---

当用户单击“确认订单”按钮时，如何设置“purchaseDetails”

useState

和我想要的输出

onClick={e => testRequest(e)} 

    const testRequest = (e) => { 
       setPurchaseDetails(e.target.value)
    }

然后testRequest将类似于

onClick={e => testRequest(e)} 

    const testRequest = (e) => { 
       setPurchaseDetails(e.target.value)
    }

在此e.target中是您的按钮，您可以从中获取属性，如

e.target.value

或

e.target.id

，从按钮返回这些属性。您可以尝试

e.target.which

从按钮获取任何属性

---

但要说出你想要什么有点难。您应该指定要将purchaseDetails设置为的内容

这里有一些现代javascript课程，可以学习更多的javascript技巧和语法

---

此逻辑适用于您，只需集成到您的代码块中即可

var数组=[
{
可用性：正确，
品牌：“MSI”，
pid:3，
价格：350698
},
{
可用性：正确，
品牌：“MSI”，
pid:3，
价格：350698
},
{
可用性：正确，
品牌：“MSI”，
pid:4，
价格：350698
}
];
var dataToSend=array.reduce（（acc，value）=>{
const item=acc.find（d=>d.item.pid==value.pid）；
如果（项目）{
项目数量++；
}否则{
acc.push（{项目：值，数量：1}）；
}
返回acc；
}, []);
console.log（dataToSend）更新您的问题以显示您已更新的内容。你能再读一遍吗。（useffect和testrqeust函数代码已更新）请您再次阅读问题。我提到了我从数据层获得的数据，我想用这些数据创建一个新的数组。我提到了所有的数据，谢谢你的回复。我再次更新了问题。问题是我从数据层得到了一组对象。我想从中创建一个新数组。我提到了我想要的输出。请再检查一遍谢谢。但我想用useState实现这段代码。我想将这些数据存储在useState上