Question

我正在构建一个应用程序，显示可以按类型过滤的项目列表和用户的“开发点”。从下拉菜单中选择“类型”和“开发点”。

这种相当标准的设置有一个小的转折，因为下拉菜单中的选项由过滤后的输出决定。例如：如果没有“评估”类型的项目具有“教育”开发点（并且我按“评估”过滤），则“教育”选项将从“开发点”下拉菜单中消失。

我创建了一个使用3个组件的设置：

1主要组成部分。 2过滤器的一个组件，用于设置'type_filter'和＆amp; 'developmentpointfilter'在主要组件中 3.一个简单的“listdisplay”组件，显示所有结果。

“主要组件”有两种处理过滤器的方法：

答：'setFilter'方法，作为道具传递给''。每次用户设置过滤器时都会设置组件 - 这会设置'type_filter'和＆amp;主要组件中的'developmentpointfilter'

setFilter(value, key) {
        //Set state filters to the right values.
        this.setState({[key] : value})
        this.Filter()
    }

B：'过滤'方法。获取“项目列表”并将其过滤掉，直到只保留相关项目，然后将其传递给“列表显示”组件。

Filter() {

        //No filters are set, so show all results
        if (this.state.developmentpoint_filter === "" && this.state.type_filter === "" && this.state.subject_filter === "") {
            this.setState({filtered_items: this.state.items})
        }

        let filtered_items = new Set();

        for (let item of this.state.items.results) {

            //Iterate over items and compare with items if applicable.
            if (this.state.type_filter[0] && this.state.type_filter[0]!=="") {
                if (item.type === this.state.type_filter) {
                    console.log('match!');
                    filtered_items.add(item)
                }
            }

            if (this.state.developmentpoint_filter[0] && this.state.developmentpoint_filter[0]!=="") {
                for (let category of item.categories) {

                    if (category.name === this.state.developmentpoint_filter) {
                        console.log('match!');
                        filtered_items.add(item)
                    }
                }
            }

            if (this.state.subject_filter[0] && this.state.subject_filter[0]!=="") {
                if (item.subject === this.state.subject_filter) {
                    console.log('match!');
                    filtered_items.add(item)
                }
            }
        }

        //Turn the results into a array, that can be used for further processing.
        filtered_items = Array.from(filtered_items);

        if (filtered_items.length > 0) {
            console.log('ik doe mijn ding')
            // Filters are active and results are active
            this.setState({
                filtered_items: {'results' :filtered_items},
                no_results: false,
            });

        }

        if (filtered_items.length < 1){
            // Filters are active but no results are found
            this.setState({
                filtered_items: {'results' :[]},
                no_results: true,
            });
        }

        console.log(this.state.filtered_items);
        this.setState({flup: this.state.filtered_items});
    }

正如您所看到的，在'setFilter'方法中调用'Filter'方法，在更新状态以包含新过滤器之后。

这个设置似乎应该有效，但是我遇到了以下问题：状态中的'filtered_items'数组总是落后于程序的其余部分。我将此数组的值打印到控制台，此数组始终表示上次单击过滤器时应显示的值。

如果要显示2个项目，但这是我第一次点击，它将显示完整列表。如果我然后调整过滤器以便只显示1个项目，它将显示（并打印到控制台）上一个查询中的2个项目等。

有谁知道我在这里做错了什么？

React - Method总是跑得太晚了一步。

0 个答案: