反应过滤器不过滤对象答案

【问题标题】：React filter not filtering through objects反应过滤器不过滤对象
【发布时间】：2023-03-20 03:50:01
【问题描述】：

我是新手，在将一些过滤后的数据渲染到组件时遇到问题。

我的数据被导入到父级<app/> 容器的状态中，如下所示：

getInitialState () {
    return {
        samples:allSamples,
        searchInputVal:""
    }   
},

这是加载到样本初始状态的数据：

export default [
            {
            id:"1",
            sampleName:'Deep House Base',
            sampleFamily:'Deep House Pack',
            parentCategory:"bass",
            subCategory:"house bass",
            uploader:"Ben",
            soundSource:"../../samplesWav/bd_909dwsd.wav",
            tags:[
                "house","ghouse","tech-house","rad"
            ]
        },
            {
            id:"2",
            sampleName:'Deep House Base',
            sampleFamily:'G House Pack',
            parentCategory:"bass",
            subCategory:"house bass",
            uploader:"Ben",
            soundSource:"../../samplesWav/bd_chicago.wav",
            tags:[
                "house","ghouse","tech-house","rad"
            ]
        }
]

我创建了一个标头组件，它是<app/> 的子组件，并将输入到服务器作为过滤器功能，如下所示：

<input placeholder="Search Samples Here..." onChange={this.props.updateSearch} value={this.props.searchInputVal} type="text"></input>

onChange 它在其父级中执行 updateSearch 功能。这个函数是这样的：

updateSearch(event){
    this.setState({
        searchInputVal:event.target.value.substr(0,20)
    })
},

目前，当我在输入中键入字母时，状态会随着值更新，因此该部分工作正常。这是我渲染出未过滤的对象的部分。这是我要过滤的组件：

class SamplesInnerLrg extends Component {  
    render() {
        let filteredSamples = this.props.loadAllInitSamples.filter(
            (sample) => {
                return sample.sampleFamily.indexOf(
                    this.props.searchInputVal
                )
            }
        )
        return <div className="samples-container-inner-styling">
        {
        console.log(filteredSamples),
        filteredSamples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                <div className="sample-comp-lge-head-wrap">
                    <div className="sample-comp-lge-audio" id={sample.id} ref={sample.id} onClick={this.playSampleAction.bind(undefined,sample,sample.id)}>
                        <audio preload="auto" className="audioTag">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name"><h1>{sample.sampleName}</h1></span>
                        <span className="sample-comp-lge-id"><h2><a href="#">{sample.sampleFamily}</a></h2></span>
                        <div className="sample-comp-lge-owner-cont">
                            <div className="sample-comp-lge-owner-inner">
                                <a href="">{sample.uploader}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="sample-comp-lge-bottom-wrap">
                    <div className="sample-comp-lge-tags-cont">
                        <div className="sample-comp-lge-tag">
                            <ul className="sample-tags-list">
                                {
                                    sample.tags.map((tag) => {
                                        return ( 

                                            <li key={tag}><a href="#">#{tag}</a></li>
                                        )
                                    })

                                }
                            </ul>
                        </div>
                    </div>
                </div>

                </div>
            )
        })
   }
   </div>
    }
}

我对这个组件的渲染有两个问题。首先，当我加载页面时，没有对象被渲染到 DOM，但是当我开始在输入框中输入时，它们突然出现了。其次，不管我输入什么，它们都会出现（我有超过 2 个，但为了 StackOverflow，我只包括 2 个）。我哪里出错了？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这一行：

let filteredSamples = this.props.loadAllInitSamples.filter(
        (sample) => {
            return sample.sampleFamily.indexOf(
                this.props.searchInputVal
            )
        }
)

...有问题。 indexOf 返回一个索引，如果没有找到，则返回 -1。 .filter(...) 期望函数返回一个布尔值。您需要在索引结果中添加 >= 0 以将其转换为布尔值（假设您希望“存在”为 true）：

const filteredSamples = this.props.loadAllInitSamples.filter(sample => {
  return sample.sampleFamily.indexOf(this.props.searchInputVal) >= 0;
});

【讨论】：