我正在尝试计算带有孩子的对象数组的权重之和,但是我认为我做错了方法。我正在尝试使用可搜索的下拉包显示包裹清单。个人应该能够选择包裹的类别并查看在文本标签中选择的包裹的总重量。以下是我的代码
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',
},
})
我似乎不太正确,我希望能够根据所选包裹类别对总重量进行汇总
答案 0 :(得分:0)
const sum = ParcelCategories
.find(x => x.category === 'Men\'s') // get the Men's category
.children
.map(x => x.Weight)
.reduce((acc, cur) => acc + cur, 0)
答案 1 :(得分:0)
您需要先进行映射以仅保留体重:
ParcelCategories[0].children.map(function(item) { return item.Weight }).reduce(function(curval, newval) { return curval + newval })
答案 2 :(得分:0)
首先,您需要修改导入语句:
// 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
}