Question

我正在尝试根据复选框对数组进行过滤。勾选后，将显示具有这些属性的元素（可见，已报告等）。我的过滤器功能有问题。

我尝试使用forEach方法，但是由于试图使最后一个复选框的结果保持相同而变得混乱。因此，我决定使用状态将这些值保持不变，然后根据状态过滤结果。但是，即使我的控制台日志将可见和报告的值显示为1s或0s，也会被告知“无法读取未定义的属性”状态”。不知道出了什么问题，但是希望您能解决该问题，特别是如果我走错路了！

handleCheck = (e) => {
        if (e.target.checked) {
            this.setState ({
                [e.target.name]: '1'
            })
        } else {
            this.setState ({
                [e.target.name]: '0'
            })
        }
        console.log(this.state);
        this.filterPosts();

    }


    filterPosts = () => {
        this.setState ({
            parentArray: this.props.parentResults
        })

        var filterArray = this.state.parentArray.filter(function(element) {
            if (this.state.viewable===1 && this.state.reported===1) {
                return element.viewable===1 && element.reportCount>0
            } else if (this.state.viewable===1 && this.state.reported===0) {
                return element.viewable===1 && element.reportCount===0
            } else if (this.state.viewable===0 && this.state.reported===1) {
                return element.viewable===0 && element.reportCount>0
            } else if (this.state.viewable===0 && this.state.reported===0) {
                return element.viewable===0 && element.reportCount===0
            }
        }); 

        console.log(filterArray);
    }

parentArray来自道具，并且绝对可以使用forEach方法。然后，我使用复选框更改状态，并尝试使用它来修改过滤器功能。

只希望在选中复选框时可见或报告的帖子出现或消失。干杯！

Answer 1

出现错误的原因是setState异步工作。因此，当您尝试过滤数组时，它仍未初始化。

您应该在构造函数中将parentArray初始化为

    constructor(props){
      super(props);
      this.state = {
          parentArray: this.props.parentResults,}

    }

或者只是在您的过滤器帖子功能中过滤this.props.parentResults

filterPosts = () => {
    var filterArray = this.props.parentResults.filter(function(element) {
        if (this.state.viewable===1 && this.state.reported===1) {
            return element.viewable===1 && element.reportCount>0
        } else if (this.state.viewable===1 && this.state.reported===0) {
            return element.viewable===1 && element.reportCount===0
        } else if (this.state.viewable===0 && this.state.reported===1) {
            return element.viewable===0 && element.reportCount>0
        } else if (this.state.viewable===0 && this.state.reported===0) {
            return element.viewable===0 && element.reportCount===0
        }
    }); 

    console.log(filterArray);
}

使用Filter和state过滤React中对象数组的结果

1 个答案: