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

【问题标题】：How to count the price from a list of options?如何从选项列表中计算价格？
【发布时间】：2020-06-13 17:31:40
【问题描述】：

我正在通过尝试做一个美食应用程序来学习对 expo 的原生反应。现在我正在构建附加屏幕，客户可以在其中添加奶酪、培根等到他的订单中。要呈现我正在使用 SectionList 的选项。一切看起来都不错，但是我如何正确编码加号和减号按钮逻辑，以便它更改“0”？以及如何读取这些值并乘以每个价格以获得正确的 ORDER NOW 值？我现在真的迷路了。

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text,Thumbnail, CheckBox, View, Image, Input, StyleProvider,Form, Label, Item, ListItem, Badge, List, Textarea, Segment  } from 'native-base';
import { StyleSheet, ImageComponent, SectionList } from 'react-native';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Entypo, Feather, FontAwesome5, MaterialCommunityIcons, FontAwesome, MaterialIcons, AntDesign } from '@expo/vector-icons';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';




const Extra = ({ item }) => (
  <View style={styles.item}>

    <Body style={styles.bodylistaextra}>

      <Text style={styles.nomeextra}>{item.name}</Text>
      <Text note numberOfLines={1} style={styles.preçoextra}>{"$ " + item.preco}</Text>

    </Body>

    <View style={styles.viewQuantidade}>
      <Button transparent >
        <AntDesign name='minuscircleo' style={styles.iconediminuirextra}></AntDesign>
      </Button>

      <Form>
        <Textarea style={styles.caixaquantidade} rowSpan={1} bordered placeholder="0" />
      </Form>

      <Button icon transparent >
        <AntDesign name='pluscircleo' style={styles.iconeaumentarextra}></AntDesign>
      </Button>
    </View>

  </View>
);


export default class ItemPSScreen extends Component {


  render() {

    const {route} = this.props;
    const { item } = route.params;

    return (


    <Container>

        <SectionList
          ListHeaderComponent={
            <Content>
              <Thumbnail square style={styles.imagemitem} source={{uri: 'https://iguatemi.com.br/brasilia/sites/brasilia/files/styles/crop_blog_1920x720/public/2019-11/Madero%20%281%29_0.png?h=e6fdde1b&itok=CSnKh7nl'}} />

              <View style={{width: wp('95%'), alignSelf:'center'}}>

                <Text style={styles.tituloitem}>{item.name}</Text>

                <Text style={styles.descricaoitem}>{item.descricao}</Text>

                <Text style={styles.valoritem}>{"$ " + item.preco}</Text>

              </View>
            </Content>
          }
          sections={item.extraOptions}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => <Extra item={item} />}
          renderSectionHeader={({ section: { title } }) => (
            <List>
              <ListItem itemDivider style={styles.itemdivisoria}>
                <Text style={styles.header}>{title}</Text>
              </ListItem>      
            </List>
          )}
          ListFooterComponent={
            <Content>
            <MaterialIcons name='chat' style={styles.iconeobservacao}></MaterialIcons>

            <Text style={styles.textoobservacao} >Observações:</Text>

            <Form>

              <Textarea style={styles.caixaobservacao} rowSpan={5} bordered placeholder="Tirar cebola, tirar o molho, sem sal, etc." />

            </Form>


            <Button style={styles.botaopedir}>

              <Text style={styles.textopedir}>ORDER NOW</Text>

              <Text style={styles.valortotalpedido}>{"$ " + item.preco}</Text>

            </Button>
            </Content>
          }/>

    </Container>

    );
  }
}

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs react-native logic expo

【解决方案1】：

对于每个项目，看起来你都有一个很好的对象：

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

当用户将特定项目添加到购物车时，您应该添加一个额外的对象键字段，例如quantity。并将其设置为1，因为我们知道如果他们添加了它，至少会有一个数量

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

然后你应该对这个组件处于某种状态：

const Extra = ({ item }) => ( 通过添加 `const [quantity, setQuantity] = useState(0)

<Textarea style={styles.caixaquantidade} rowSpan={1} bordered placeholder="0" />

包括quantity

<Textarea style={styles.caixaquantidade} rowSpan={1} bordered placeholder="0" value={quantity}/>

然后在这里：<AntDesign name='pluscircleo' style={styles.iconeaumentarextra}></AntDesign> 你应该添加一个onChange 侦听器以通过执行setQuantity(quantity + 1) 来增加数量（显然对减号也这样做

那么你想要一个函数来计算整个购物篮的总价格，并且在添加额外内容时应该监听或调用该函数

你可以有一个 updateBasket 函数来获取当前总数，更新它，然后显示新的总数

如果有帮助请告诉我

【讨论】：

在这种情况下，我无法在 const Extra 中添加：“const [quantity, setQuantity] = useState(0)”。如果它是一个函数组件，它会工作，对吧？
没错，把它改成一个 func 组件就可以了
为什么 AntDesign 上的“onChange”而不是 Button 内的“onPress”？
啊，可能是onPress，我不熟悉onPress，但是你用那个
按钮工作正常，但我发送给的项目是原始项目的副本？我正在更改数量，但无法在我的班级组件中打印

【解决方案2】：

起初，我认为你的每个“项目”都会有一个名为quantity的附加属性，表示你的项目数量将被调整。

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

然后当用户点击加号或减号按钮时，您只需增加/减少您项目的quantity 属性，然后将其设置回状态。

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

检查我的代码：

componentDidMount() {
    const {route} = this.props;
    let { item } = route.params;

    let {extraOptions} = item;

    extraOptions= extraOptions.map((option) => {
        option.quantity = 0;
        return option;
    });

    item.extraOptions = extraOptions;

    this.setState({
        item,
    })
}

 render() {
     let extraOptions = (this.state.item) ? this.state.item.extraOptions : [];
     return (
         <Container>

             <SectionList
                ... 
                sections={extraOptions}
                ...
             />
         </Container>
     );
  }

  const Extra = ({ item, index }) => (
    <View style={styles.item}>
        ...
        <View style={styles.viewQuantidade}>
            <Button transparent onPress={() => {
                let {item} = this.state;
                let {extraOptions} = item;

                extraOptions[index].quantity = extraOptions[index].quantity - 1;
                item.extraOptions = extraOptions;
                this.setState({
                    item,
                });
            }}>
                ....
            <Button icon transparent onPress={() => {
                let {item} = this.state;
                let {extraOptions} = item;

                extraOptions[index].quantity = extraOptions[index].quantity + 1;
                item.extraOptions = extraOptions;
                this.setState({
                    item,
                });
            }} >
                ...
            </Button>
        </View>

    </View>
);

希望有所帮助:)

【讨论】：