使用reduce計算對象數組的總和

Question

我正在嘗試計算帶有孩子的對象數組的權重之和，但是我認為我做錯了方法。 我正在嘗試使用可搜索的下拉包顯示包裹清單。 個人應該能夠選擇包裹的類別並查看在文本標簽中選擇的包裹的總重量。 以下是我的代碼

parcelCategories.js

    export const ParcelCategories = [
      {
        name: "Men's",
        id: 0,
        children: [
          {
            name: 'Clothing',
            id: 10,
            Weight: 4,
          },
          {
            name: 'Shirts',
            id: 11,
            Weight: 3,
          },
          {
            name: 'Jackets & Coats',
            id: 13,
            Weight: 2,
          },
          {
            name: 'Hoodie & Sweatshirts',
            id: 14,
            Weight: 4,
          },
          {
            name: 'Shorts',
            id: 15,
            Weight: 4,
          },
          {
            name: 'Jeans',
            id: 17,
            Weight: 2,
          },
          {
            name: 'Sneakers',
            id: 18,
            Weight: 1,
          },
          {
            name: 'Loafers & Slip-ons',
            id: 19,
            Weight: 4,
          },
        ]
      }
    ];

App.js

    import React, { Component } from 'react'
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      ScrollView,
      Switch,
      TouchableWithoutFeedback,
      TouchableOpacity,
      ActivityIndicator,
      Dimensions,
      LayoutAnimation,
    } from 'react-native'
    import SectionedMultiSelect from 'react-native-sectioned-multi-select'
    import Icon from 'react-native-vector-icons/MaterialIcons'
    import ParcelCategories from './parcelCategories'


    const tintColor = '#174A87'

    export default class App extends Component {
      constructor() {
        super()
        this.state = {
          items: null,
          loading: false,
          selectedItems: [],
          selectedItems2: [],
          selectedItemObjects: [],
          currentItems: [],
          showDropDowns: false,
          single: false,
          readOnlyHeadings: false,
          highlightChildren: false,
          selectChildren: false,
          hasErrored: false,
        };
        this.termId = 100;
      }

      onSelectedItemsChange = (selectedItems) => {
        const filteredItems = selectedItems.filter(val => !this.state.selectedItems2.includes(val));
        this.setState({ selectedItems: filteredItems });
        console.log(selectedItems);
      }

      onConfirm = () => {
        this.setState({ currentItems: this.state.selectedItems });
      }
      onCancel = () => {
        this.SectionedMultiSelect._removeAllItems();

        this.setState({
          selectedItems: this.state.currentItems,
        });
        console.log(this.state.selectedItems);
      }

      customChipsRenderer = (props) => {
        console.log('props', props);
        return (
          <View style={{ backgroundColor: 'yellow', padding: 15, }}>
          <Text>Selected:</Text>
          {props.selectedItems.map((singleSelectedItem) => {
            const item = this.SectionedMultiSelect._findItem(singleSelectedItem)

            if (!item || !item[props.displayKey]) return null;

            return (
              <View key={item[props.uniqueKey]} style={{ flex: 0,marginRight: 5, padding: 10, backgroundColor: 'orange' }}>
              <TouchableOpacity onPress={() => { this.SectionedMultiSelect._removeItem(item) }}>
              <Text>{item[props.displayKey]}</Text>
              </TouchableOpacity>
              </View>
            );
          })}
          </View>
        );
      }

      onSelectedItemObjectsChange = (selectedItemObjects) => {
        this.setState({ selectedItemObjects });
        console.log(selectedItemObjects);
      }

      renderSelectText = () => {
        const { selectedItemObjects } = this.state;

        return selectedItemObjects.length ?
          `I like ${selectedItemObjects.map((item, i) => {
            let label = `${item.name}, `;
            if (i === selectedItemObjects.length - 2) label = `${item.name} and `;
            if (i === selectedItemObjects.length - 1) label = `${item.name}.`;
            return label;
          }).join('')}`
          :
          'Select a parcel';
      }

      addValues = () => {
        const total = parcelCategories.reduce((result, { children: { value } }) => result.value + value, 0)
        return total;
      }

      render() {
        return (
          <ScrollView keyboardShouldPersistTaps="always" style={{ backgroundColor: '#f8f8f8' }} contentContainerStyle={styles.container}>
            <Text style={styles.welcome}>
                React native sectioned multi select example.

            </Text>
            <SectionedMultiSelect
              items={parcelCategories}
              ref={SectionedMultiSelect => this.SectionedMultiSelect = SectionedMultiSelect}
              uniqueKey="id"
              subKey="children"
              displayKey="name"
              iconKey="icon"
              modalWithTouchable
              customChipsRenderer={this.customChipsRenderer}
              chipsPosition="top"
              showDropDowns={this.state.showDropDowns}
              expandDropDowns={this.state.expandDropDowns}
              readOnlyHeadings={this.state.readOnlyHeadings}
              onSelectedItemsChange={this.onSelectedItemsChange}
              onSelectedItemObjectsChange={this.onSelectedItemObjectsChange}
              onCancel={this.onCancel}
              onConfirm={this.onConfirm}
              selectedItems={this.state.selectedItems}
              colors={{ primary: this.state.selectedItems.length ? 'forestgreen' : 'crimson', }}
              itemNumberOfLines={3}
              selectLabelNumberOfLines={3}
              styles={{
                selectedItemText: {
                  color: 'blue',
                },
                selectedSubItemText: {
                   color: 'blue',
                },
              }}
            />
            <View style={{ flexWrap: 'wrap', flex: 1, backgroundColor: 'red', height: 70 }}>
            <Text>{this.renderSelectText()}</Text>
            <Text>{this.addValues()}Kg</Text>
            </View>
          </ScrollView>
        );
      }
    }

    const styles = StyleSheet.create({
      center: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30,
      },
      container: {
        paddingTop: 40,
        paddingHorizontal: 20,
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: '#333',
      },
      border: {
        borderBottomWidth: 1,
        borderBottomColor: '#dadada',
        marginBottom: 20,
      },
      heading: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 5,
        marginTop: 20,
      },
      label: {
        fontWeight: 'bold',
      },
    })

我似乎不太正確，我希望能夠根據所選包裹類別對總重量進行匯總

Answer 1

您需要先映射才能僅保留Weight：

ParcelCategories[0].children.map(function(item) { return item.Weight }).reduce(function(curval, newval) { return curval + newval }) 

Answer 2

首先，您需要修改導入語句：

// needs braces if you aren't exporting default
import { ParcelCategories } from './parcelCategories'

在您的SectionedMultiSelect道具中：

<SectionedMuliSelect
  items={ParcelCategories}
  // ...the rest of the code

如果您使用ParcelCategories作為項目SectionedMultiSelect ，你應該能夠做到這一點：

addValues = () => {
  const { selectedItemObjects } = this.state
  const total = selectedItemObjects.reduce((result, { Weight }) => result += Weight, 0)
  return total
}