如何在使用 lodash 過濾 mongoDB 集合數組時使用“大於”？

Question

我如何使用“大於”具有來自 mongoDB 的集合的數組進行過濾？

到目前為止，我所做的所有過濾器都是不變的，如下所示：

this.setState({ dataList: _.filter(this.state.dataList, { "Name": "Samuel" }) });

因此，在這種情況下，它將向我顯示名稱等於 Samuel 的所有項目。

我想要做的是向我展示所有早於“x”的項目。 我嘗試使用 mongoDB 文檔中的 $gt，如下所示：

this.setState({ dataList: _.filter(this.state.dataList, { "age": {$gte: 20 }) });

我也嘗試過這樣使用 function ：

this.setState({ dataList: _.filter(this.state.dataList, ({age}) => age > 20) });

通過失眠輸入：

{
    "name": "John",
    "age": 10
}

Output 通過調試菜單中的 console.log：

[
    {
        "_id": "5e44ab5a38de8c2238750a22",
        "name": "Samuel",
        "age": "25",
        "__v": 0
      },
      {
        "_id": "5e44ac0d38de8c2238750a23",
        "name": "John",
        "age": "10"
        "__v": 0
      }
    ]

預期的結果是只顯示 Samuel 的數據，但它沒有使用$gte顯示任何內容，而使用 function ({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);

我對如何處理它並使其正常工作一無所知。

更新：

我發現了錯誤。 實際上我存儲庫中的 model 沒有更新，年齡模式是一個字符串。 現在我更新了它並且工作正常。

Answer 1

可以批處理setState調用。 這意味着如果您多次對同一個 state 值調用setState ，則 output 將不可預測。

在您的示例中，您試圖在同一方法中設置dataList兩次。 您可以解決此問題，將第二組 state 包裝在回調中：

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) });
    }
  });
};

或者只設置 state 一次：

filter = () => {
  let dataList = this.state.fullData;
  if (this.state.filterName === true) {
    dataList = _.filter(this.state.dataList, { Name: "Samuel" });
  }
  if (this.state.filterAge === true) {
    dataList = _.filter(this.state.dataList, ({ age }) => age > 20);
  }

  this.setState({ dataList });
};