数组时如何使用'大于'?"/>
在用lodash过滤mongoDB集合数组时如何使用'大于'?
我如何用“大于”过滤具有mongoDB集合的数组?
我到目前为止所做的所有过滤器都是恒定的,像这样:
this.setState({ dataList: _.filter(this.state.dataList, { "Name": "Samuel" }) });
因此,在这种情况下,它将向我显示名称等于塞缪尔的所有物品。
我想做的是向我显示所有早于'x'的项目。我尝试从mongoDB文档中使用$ gt 像这样:
this.setState({ dataList: _.filter(this.state.dataList, { "age": {$gte: 20 }) });
而且我也尝试使用功能这种方式:
this.setState({ dataList: _.filter(this.state.dataList, ({age}) => age > 20) });
通过失眠症输入:
{
"name": "John",
"age": 10
}
通过调试菜单中的console.log输出:
[
{
"_id": "5e44ab5a38de8c2238750a22",
"name": "Samuel",
"age": "25",
"__v": 0
},
{
"_id": "5e44ac0d38de8c2238750a23",
"name": "John",
"age": "10"
"__v": 0
}
]
[预期结果将只是显示塞缪尔的数据,但使用$gte
不会显示任何内容,而使用函数({age}) => age > 20)
则会显示两者。
代码:
import React, { Component } from 'react';
import { ScrollView, FlatList, View, Modal, Text, TouchableOpacity } from 'react-native';
import { withNavigation } from 'react-navigation';
import { CheckBox, ListItem, Fab, Icon } from 'native-base';
import listStyle from './style';
import Card from '../Card/index';
import api from '../../service/api';
import _ from "lodash";
class Names extends Component {
static navigationOptions = { header: null };
constructor(props) {
super(props);
this.state = {
dataList: [],
fullData: [],
modalVisible: false,
filterName: false,
filteArge: false,
loading: false
};
}
UNSAFE_componentWillMount() {
return api
.get('/main')
.then(responseJson => {
this.setState({
dataList: responseJson.data,
fullData: responseJson.data,
loading: false
});
})
.catch(error => {
console.error('server off');
});
}
fName = async () => {
if (this.state.filterName)
await this.setState({ filterName: false });
else
await this.setState({ filterName: true });
}
fAge = async () => {
if (this.state.filterAge)
await this.setState({ filterAge: false });
else
await this.setState({ filterAge: true });
}
filter = () => {
this.setState({ dataList: this.state.fullData });
if ((this.state.filterName) === true) {
this.setState({ dataList: _.filter(this.state.dataList, { "Name": "Samuel" }) });
}
if ((this.state.filterAge) === true) {
this.setState({ dataList: _.filter(this.state.dataList, ({ age }) => age > 20) });
}
};
render() {
return (
<View>
<ScrollView >
<FlatList
data={this.state.dataList}
renderItem={({ item }) => <Card item={item} />}
keyExtractor={item => item._id}
/>
</ScrollView>
<View>
<Modal
animationType="fade"
visible={this.state.modalVisible}
transparent={true}
>
<View>
<Text> Name= Samuel</Text>
<ListItem>
<CheckBox onPress={this.fName} checked={this.state.filterName} />
<Text >Yes</Text>
</ListItem>
<Text> age > 20</Text>
<ListItem >
<CheckBox onPress={this.fAge} checked={this.state.filterAge} />
<Text >Yes</Text>
</ListItem>
<TouchableOpacity
onPress={() => {
this.setState({ modalVisible: false });
this.filter();
console.log(this.state.dataList);
}}
>
<Text>Close</Text>
</TouchableOpacity>
</View>
</Modal>
</View >
<Fab
direction="up"
containerStyle={{}}
position="bottomLeft"
onPress={() => {
this.setState({ modalVisible: true });
}}
>
<Icon name="md-add" />
</Fab>
</View >
);
}
}
export default withNavigation(Name);
我对如何处理并使其正常工作一无所知。
回答如下:setState
呼叫can be batched。这意味着如果您多次在相同状态值上调用setState
,则输出将不可预测。
在您的示例中,您试图以相同的方法将dataList
设置两次。您可以解决此问题,将第二个设置状态包装在回调中:
filter = () => {
this.setState({ dataList: this.state.fullData }, () => {
if (this.state.filterName === true) {
this.setState({ dataList: _.filter(this.state.dataList, { Name: "Samuel" }) });
}
if (this.state.filterAge === true) {
this.setState({ dataList: _.filter(this.state.dataList, ({ age }) => age > 20) });
}
});
};
或仅通过一次设置状态:
filter = () => {
let = this.state.fullData;
if (this.state.filterName === true) {
dataList = { dataList: _.filter(this.state.dataList, { Name: "Samuel" }) };
}
if (this.state.filterAge === true) {
dataList = { dataList: _.filter(this.state.dataList, ({ age }) => age > 20) };
}
this.setState({ dataList });
};
更多推荐
在用lodash过滤mongoDB集合数组时如何使用'大于'?
发布评论