Javascript 如何从选项列表中计算价格？

我正在通过尝试制作一个食品应用程序来学习如何应对世博会。现在我正在构建一个额外的屏幕，客户可以在其中添加奶酪、培根等。为了呈现选项，我使用了SectionList。一切看起来都很好，但如何正确地编写加号和减号按钮逻辑，使其更改“0”？如何读取这些值并乘以每个值以得到正确的订单值？我现在真的迷路了

import React，{Component}来自'React'；
从“本机基础”导入{容器、页眉、标题、内容、页脚、页脚选项卡、按钮、左、右、正文、图标、文本、缩略图、复选框、视图、图像、输入、样式提供程序、表单、标签、项、列表项、徽章、列表、文本区域、段}；
从“react native”导入{StyleSheet，ImageComponent，SectionList}；
从“react native easy Grid”导入{Col，Row，Grid}；
从“@expo/vector icons”导入{Entypo，Feather，FontAwesome5，materialcommunitycons，FontAwesome，materialcons，AntDesign}；
从“react native responsive fontsize”导入{RFPercentage，RFValue}；
从“react native responsive screen”导入{widthPercentageToDP作为wp，heightPercentageToDP作为hp}；
常量额外=（{item}）=>(
{item.name}
{“$”+item.preco}
);
导出默认类ItemsScreen扩展组件{
render（）{
const{route}=this.props；
const{item}=route.params；
返回(
项目+索引}
renderItem={（{item}）=>}
renderSectionHeader={（{section:{title}}}）=>(
{title}
)}
ListFooter组件={
观察者：
现在点菜
{“$”+item.preco}
}/>
);
}
}

---

谢谢你的帮助

对于每一个项目，看起来您都有一个很好的对象，如下所示：

item: {
  tituloitem: 'bacon'
  descricaoitem: ''
}

当用户将特定项目添加到购物车时，您应该添加一个额外的对象键字段，如

数量

。并将其设置为

1

，因为我们知道，如果他们添加了它，至少会有一个数量

item: {
  tituloitem: 'bacon'
  descricaoitem: '',
  quantity: 1, 
}

然后，您应该在此组件的某些状态下：

const-Extra=（{item}）=>（

通过添加`const[quantity，setQuantity]=useState（0）

包括数量

然后在这里：

您应该添加一个

onChange

侦听器，通过执行

设置数量（数量+1）

来增加数量（显然，对于减号也要这样做）

然后你想有一个函数，计算出你整个篮子的总价格，这个函数应该在添加额外的东西时被监听或调用

您可以使用一个

updateBasket

函数来获取当前总数，对其进行更新，然后显示新的总数

---

让我知道这是否有助于

对于每一项，您似乎都有一个这样好的对象：

item: {
  tituloitem: 'bacon'
  descricaoitem: ''
}

当用户将特定项目添加到购物车时，您应该添加一个额外的对象键字段，如

quantity

。并将其设置为

1

，因为我们知道，如果用户添加了该项目，则至少会有一个数量

item: {
  tituloitem: 'bacon'
  descricaoitem: '',
  quantity: 1, 
}

然后，您应该在此组件的某些状态下：

const-Extra=（{item}）=>（

通过添加`const[quantity，setQuantity]=useState（0）

包括数量

然后在这里：

您应该添加一个

onChange

侦听器，通过执行

设置数量（数量+1）

来增加数量（显然，对于减号也要这样做）

然后你想有一个函数，计算出你整个篮子的总价格，这个函数应该在添加额外的东西时被监听或调用

您可以使用一个

updateBasket

函数来获取当前总数，对其进行更新，然后显示新的总数

---

让我知道这是否有帮助首先，我认为您的每个“项目”都将具有名为

quantity

的附加属性，以指示您的项目数量将被调整

您可以将“项”存储在组件状态中，以便在状态更改时更新屏幕UI

然后，当用户单击加号或减号按钮时，您只需增加/减少项目的

数量

属性，然后将其设置回状态

最后，要计算总价，只需计算所有项目的总和

价格

*

数量

检查我的代码：

componentDidMount（）{
const{route}=this.props；
设{item}=route.params；
设{extraOptions}=item；
extraOptions=extraOptions.map（（选项）=>{
option.quantity=0；
返回选项；
});
item.extraOptions=extraOptions；
这是我的国家({
项目,，
})
}
render（）{
让extraOptions=（this.state.item）？this.state.item.extraOptions:[]；
返回(
);
}
常量额外=（{item，index}）=>(
...
{
设{item}=this.state；
设{extraOptions}=item；
extraOptions[index]。数量=extraOptions[index]。数量-1；
item.extraOptions=extraOptions；
这是我的国家({
项目,，
});
}}>
....
{
设{item}=this.state；
设{extraOptions}=item；
extraOptions[index]。数量=extraOptions[index]。数量+1；
item.extraOptions=extraOptions；
这是我的国家({
项目,，
});
}} >
...