React搜索结果过滤器显示不正确

时间:2019-01-17 19:01:49

标签: reactjs filtering

我在搜索结果的过滤器中查找3个不同的类别。当我注释掉其他过滤器时,每个过滤器都可以正常工作。并且即使所有这三个元素都存在,它也可以在第一个过滤器块上精确,但是在第二个和第三个过滤器上半精确(显示较少的结果,有时没有结果)。我尽力解释了这种情况。如果问题需要进一步说明,请不要投票。

例如下面的代码:(i,brac和lim用于页面限制和分页)

        const liArt =[];
        const jiArt =[];
        const kiArt =[];
        const searchText = this.props.searchText.toLowerCase().replace(/[^a-z0-9]/g, '');
        var i = 0;
        const brac = this.props.start;
        const lim = brac + this.props.qtyPerPage;
        this.props.list.filter(u=>u.AddInfo.includes("SKU")).map((article)=>{
                            var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                            if(artText.indexOf(searchText)===-1){
                                return;
                            }
                            i++;
                            if(brac<i && i<lim){
                                kiArt.push(
                                        <ListArticle key={article.Image+article.URL} 
                                            title={article.enTitle}
                                            image={article.Image}
                                            link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                            desc={article.enDescription}
                                            kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                );//push
                            } //limit check  
                    });//filter products
         this.props.list.filter(u=>u.AddInfo == "resource").map((article)=>{
                            var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                            if(artText.indexOf(searchText)===-1){
                                return;
                            }
                            i++;
                            if(brac<i && i<lim){
                                liArt.push(
                                        <ListArticle key={article.Image+article.URL} 
                                            title={article.enTitle}
                                            image={article.Image}
                                            link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                            desc={article.enDescription}
                                            kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                );//push
                            } //limit check  
                    });//filter resources
         this.props.list.filter(u=>u.AddInfo == "page").map((article)=>{
                            var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                            if(artText.indexOf(searchText)===-1){
                                return;
                            }
                            i++;
                            if(brac<i && i<lim){
                                jiArt.push(
                                        <ListArticle key={article.Image+article.URL} 
                                            title={article.enTitle}
                                            image={article.Image}
                                            link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                            desc={article.enDescription}
                                            kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                );//push
                            } //limit check  
                    });//filter pages

下面的代码给出了不同的结果(相同的只是资源过滤器的代码块在产品过滤器之上)

                 this.props.list.filter(u=>u.AddInfo == "resource").map((article)=>{
                                    var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                                    if(artText.indexOf(searchText)===-1){
                                        return;
                                    }
                                    i++;
                                    if(brac<i && i<lim){
                                        liArt.push(
                                                <ListArticle key={article.Image+article.URL} 
                                                    title={article.enTitle}
                                                    image={article.Image}
                                                    link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                                    desc={article.enDescription}
                                                    kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                        );//push
                                    } //limit check  
                            });//filter resources
               this.props.list.filter(u=>u.AddInfo.includes("SKU")).map((article)=>{
                                    var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                                    if(artText.indexOf(searchText)===-1){
                                        return;
                                    }
                                    i++;
                                    if(brac<i && i<lim){
                                        kiArt.push(
                                                <ListArticle key={article.Image+article.URL} 
                                                    title={article.enTitle}
                                                    image={article.Image}
                                                    link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                                    desc={article.enDescription}
                                                    kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                        );//push
                                    } //limit check  
                            });//filter products
                 this.props.list.filter(u=>u.AddInfo == "page").map((article)=>{
                                    var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                                    if(artText.indexOf(searchText)===-1){
                                        return;
                                    }
                                    i++;
                                    if(brac<i && i<lim){
                                        jiArt.push(
                                                <ListArticle key={article.Image+article.URL} 
                                                    title={article.enTitle}
                                                    image={article.Image}
                                                    link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                                    desc={article.enDescription}
                                                    kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                                        );//push
                                    } //limit check  
                            });//filter pages

我认为问题出在if语句(artText ...),但是当我对artText的if进行了不确定时。

0 个答案:

没有答案
相关问题